css单位px、rem、vw

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

你可能感兴趣的:(css单位px、rem、vw)