rem、rm、px、vw之间的相互转换

Posted 2023-03-12

参考技术A

一、vw px rem em到底是什么
1.vw/vh:就是相对视口宽度或者高度,100vw 等于整个屏幕宽度 100vh等于整个屏幕高度。1vw = 1% * 视口宽度。意思是一个视口就是100vw。长度和宽度等于窗口长度或宽度的1/100
例如：1920x800的设计稿
换算1/100 1920=19.2 所以 1vw=19.2px; 即：1vw/y=100vw/1920px
换算1/100 800=8 所以　1vh=8px;

2.px:px是屏幕设备物理上能显示出的最小的一点。是相对长度单位。在桌面浏览器中，1个像素往往是对着电脑屏幕的1个物理像素，但是在移动端，css中的1px并不等于设备的1px。比如iphone3，分辨率是320 x 480。iphone4变成了640 x 960，但是iphone4的实际屏幕尺寸并没有变化。这时候的1个css像素就是等于两个物理像素。

3.rem:相对于html根元素的字体大小（font-size）来计算的长度单位，可以设置，默认16px

4.em:所有现代浏览器下，默认字体尺寸都是16px。这时,1em = 16px。em会继承父级尺寸，也是相对单位。

二、vw px rem之间的换算
1.我们假设psd的设计稿是以1920px为标准的。那么：
100vw = 1920px => 1vw = 19.2px
假设： 1rem = 100px
那么:
1920px=19.2rem = 100vw => 1rem = 100/19.2 =5.208vw
100px = 1rem = 5.208vw
这时候，我们只要给html的根元素设置：
font-size: 5.208vw即可。

响应式布局：
一：使用百分比与rem
宽度% 高度rem 字号rem 在html中设置根元素的font-size大小

这样页面中的rem将根据根元素显示字号大小，2rem就是32px

二：使用百分比与px
单位设置px，移动端的px自动转为rem