摘要：在桌面浏览器中，个像素往往是对着电脑屏幕的个物理像素，但是在移动端，随着屏的流行，分辨率提高了。中的并不等于设备的。苹果四手机，变成了，但是苹果四手机的实际屏幕尺寸并没有变化。二之间的换算我们假设的设计稿是以为标准的。
一、vw px rem em是什么
1.vw:就是相对视口宽度(Viewport Width)。1vw = 1% * 视口宽度。也就是说，一个视口就是100vw。
2.px:px应该是在css中使用最为普遍的单位了吧。px是屏幕设备物理上能显示出的最小的一点。这个点不是固定宽度的，是相对长度单位。在桌面浏览器中，1个像素往往是对着电脑屏幕的1个物理像素，但是在移动端，随着Retina屏的流行，分辨率提高了。css中的1px并不等于设备的1px。比如苹果三手机，分辨率是320 x 480。苹果四手机，变成了640 x 960，但是苹果四手机的实际屏幕尺寸并没有变化。这时候的1个css像素就是等于两个物理像素。
3.rem:是相对单位，相对于html的字体尺寸。
4.em:所有现代浏览器下，默认字体尺寸都是16px。这时,1em = 16px。em会继承父级迟钝，也是相对单位。
二、vw px rem之间的换算1.我们假设pad的设计稿是以1920px为标准的。那么：
100vw = 1920px
1vw = 19.2px
我们想要： 1rem = 100px（这样方便我们在写代码的时候换算）
那么:
100px = 100vw / 19.2 = 1rem
所以：
1rem = 5.208vw。
这时候，我们只要给html的根元素设置：
font-size: 5.208vw即可。
2.同理的，手机端我们假设设计稿是以750px为标准的，那么:
100vw = 750px
1vw = 7.5px
我们想要： 1rem = 100px
那么：
100px = 100vw / 7.5 = 1rem
那么：
1rem = 13.33vw
好啦，本篇文章到此为止~
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/113739.html
摘要：注意不能做到屏幕的百分之。因为浏览器的最小是按如上改动代码选项选项选项选项效果入图可以看到宽度和高度都能按百分比变化了，但是我们会发现一个很麻烦的东西，设计师给我们的设计稿，我们却必须把每个元素的像素单位换算为。动态rem 1. 首先我们先介绍当下的长度单位 px 像素 em 一个M的宽度 / 一个汉字的宽度 1em == 自身的font-size rem 全称root em 是根元...
摘要：注意不能做到屏幕的百分之。因为浏览器的最小是按如上改动代码选项选项选项选项效果入图可以看到宽度和高度都能按百分比变化了，但是我们会发现一个很麻烦的东西，设计师给我们的设计稿，我们却必须把每个元素的像素单位换算为。动态rem 1. 首先我们先介绍当下的长度单位 px 像素 em 一个M的宽度 / 一个汉字的宽度 1em == 自身的font-size rem 全称root em 是根元...
阅读 767·2021-09-26 09:55
阅读 2057·2021-09-22 15:44
阅读 1471·2019-08-30 15:54
阅读 1323·2019-08-30 15:54
阅读 2667·2019-08-29 16:57
阅读 516·2019-08-29 16:26
阅读 2488·2019-08-29 15:38
阅读 2121·2019-08-26 11:48
