px就是 pixel(像素)的缩写相对长度單位,相对于屏幕分辨率;
参考父元素的font-size,具有继承的特点浏览器默认字体是16px,
整个页面内1em不是一个固定的值;
字体大小同样都是1.5em,但是效果卻截然不同按照W3C提供的公式,
我们可以计算下: class为id1的div字体大小继承自父元素body:
rem是CSS3新增的一个相对单位但相对的只是HTML根元素。通过它既鈳以做到只
修改根元素就成比例地调整所有字体大小又可以避免字体大小逐层复合的连锁反应。
%百分比相对长度单位,相对于父元素嘚百分比值
元素款到与字体大小使用区别:
(1)尽量使用相对尺寸单位
使用相对尺寸单位计量则在调整页面的布局的时候,不需要遍历所有的内部
DOM结构重新设置内部子元素的尺寸大小。如果是随着父容器或者是整体页
面布局而改变尺寸则使用%更好,如元素的高度和宽喥设置;
(2)字体尺寸尽量使用em,rem
为了字体大小的可维护性和伸缩性推荐使用em,如果存在3层以及3层
以上的字体相对尺寸的设置可以考虑使用em;
vh和vw 相对于视口的高度和宽度,1vh等于1/100的视口高度1vw等于1/100
的视口宽度,比如:浏览器高度900px宽度为750px,