css单位 px 、rem 、vw 都是相对单位
rem
rem
的计算是相对于 html 页面的 font-size
,默认是1 rem = 16ox
;
如:假设设计图是 2 倍图
,那么,我们可以把 html 字体设置为50 px
,而设计图上的 div 宽度为86 px
;则 div 在实际设备上的宽度应为86 / 2
等于43 px
(实际设备宽度),43 px
对应为 43px * 1rem / 50px = 0.86 rem
1 rem = 50px;
? rem = 43px;
vw
vw
是相对viewport
视口的,1 vw = 1%
;100 vw
等于设备的宽度 100%
,所以,一般在实际开发时,把设计图的宽度改成 1000px 像素,然后用量出来的宽度除以10,字体大小也除以10;
如:一张设计图的宽度改为 1000
像素后,量出设计图上 div 的宽度为 80 px;对应 80 / 10 = 8 vw
;量出来的字体大小为 30 px ,对应 30 px / 10 = 3 vw
;
80 PX / 10 = 8VW
30 PX / 10 = 3VW