本周在反战班学习了柔性布局、网格布局、移动端布局和响应布局等。 其中，移动布局有两种方案。 流布局和rem布局。 这里我说的vw和vw的单位与rem布局密切相关。 那么，它们之间有什么关系？ vw和vw的单位到底是什么呢？ rem布局是移动端布局的一种非常普遍的方案，许多大型网站也采用了这种方案。 其优点是采用这种布局方式制作的页面能很好地适应各种型号的手机设备，并以不同的分辨率等比放大，始终符合用户的要求。 这里显示了效果图。 请参阅
这是iphone6/7/8下的效果。
请看下图：
图2 )
这是在iPad上的效果。 为了比较，我没有选择iPhone plus。 上面可以看到分辨率的比较。 iPad的分辨率比iPhone6多一倍以上，但界面依然看起来很好。 即使仔细观察周围的间隙也不会改变。 总体上非常协调。 与此同时，可以在画面上显示的内容也很明显变少了。 这是他的缺点。 那么，rem布局是如何实现的呢？
1.rem rem事实上是相对的单位。 以前我们学习过em这个单位。 这是相对于父元素或当前元素的font-size值的1em1个font-size的大小，但rem实际上也是相对于font-size的大小，不同的是利用作为根元素的font-size的rem的该特性
首先，将html的字体大小设置为固定值。 通常设定100px就可以了。 为了便于计算，网页中字体##的标题大小请勿小于12px。 之后，1rem为100px。 这样，就可以转换后实现rem页面。
这里给出了以下简单的情况。
首先，像往常一样写html结构。
食谱推荐三餐
粮库
精品好菜金枪鱼幻想曲早餐诱惑进击的鸡胸
主页
食谱
发现
我的结构写完后接css风格：
/* css reset */
* {边距： 0； padding: 0； }
img{display: block； }
a{text-decoration: none； }
/* css common */
html{font-size: 100px； }
body{font-size: 0.16rem； }
/* css header */
#header{height: 0.44rem； background: #02D1C5； }
# headerspan { font-size :18 rem； color: #FEFEFE； 文本照明3360中心； 行高度： 0.44 rem； 显示：块； }
/* CSS搜索* /
#search{width: 2.5rem； height: 0.25rem； background: #F3F3F3； 边距：2 rem 0.61 rem 0.21 rem 0.64 rem； display :闪存； }
#search input{width: 2.19rem； height: 100%； border: none； background: none； }
#search span{width: 0.17rem； 边距-左边缘： 0.1 rem； 边距-右： 0.04 rem； 显示：块； 边距-顶部： 0.02 rem； }
/* css banner */
#banner{width: 100%； height: 1.5rem； }
#banner img{width: 100%； height: 100%； }
/* css nav */
#nav{width: 100%； height: 0.88rem； display :闪存； justify-content 3360 space-evenly； align-items3360中心； }
#nav a p{width: 1.65rem； height: 0.5rem； border-radius: 0.02rem； box-shadow :02 rem 0.02 rem 0.1 rem 0.02 rem # cccccccc； 文本照明3360中心； 行高度： 0.5 rem； color: #02D1C5； }
# navapspan { font-size :25 rem； 边距-右： 0.17 rem； }
/* css main */
#main{margin-bottom: 0.7rem； }
#main h3{font-size: 0.16rem； color: #666666； 边距-左边缘： 0.49 rem； 边距-盒： 0.1 rem； }
#main div{width: 3.45rem； 边距： 0自动；
}
#main div a{display: block;width: 3.45rem;height: 1.25rem;margin-bottom: 0.15rem;position: relative;}
#main div a img{width: 100%;height: 100%;}
#main div a div{width: 100%;height: 100%; position: absolute;left: 0;top: 0;background: rgba83,83,83,.5);text-align: center;line-height: 1.25rem;font-size: 0.2rem;color: white;border-radius: 0.2rem;}
/* css footer */
#footer{width: 100%; height: 0.5rem;display: flex;justify-content: space-around;background: white;position: fixed;bottom: -0.01rem;}
#footer a {display: block;height: 100%;color: #666666;text-align: center;font-size: 0.14rem;}
#footer a span{font-size: 0.24rem;}
#footer a.active{color: #02D1C5;}
#footer a.footer-content{width: 0.5rem;height: 0.5rem;border-radius: 50%;background-color: #02D1C5;font-size: 0.22rem;color: white;line-height: 0.5rem;position: relative;bottom: 0.24rem;}
这个结构所有数据都是写在iPhone 6的分辨率基础上的，它的效果也成功地实现了，具体效果可以参考图1，但是要注意，这个时候如果我们切换了设备，那html的font-size是不会智能的切换的，rem也就没做到适配了。仅仅是这样我们是实现不了图2的效果的，不妨看下此时它在iPad下的效果：
（图3）
这个时候可以发现它和图2的效果差别是非常大的，那么rem怎么做到等比缩放呢，这里就要用到vw了。
2.vw vw也是一个单位，并且也是一个相对单位：vw -> view width vh -> view height 相对单位：表示把屏幕自动分成了100vw宽和100vh高。 vw / vh : 把屏幕分为100份，1vw等于屏幕宽的1%。这里的100份，它是适用于各种分辨率下的，不管是宽375px的设备，还是414px的都是一样的效果。假设屏幕是375px -> 100vw -> 1vw == 3.75px假设屏幕是414px -> 100vw -> 1vw == 4.14px在实际操作中我们一般都会选择iphone6的设备，它的宽度就是375px的，于是我们可以进行一个简单的计算1vw == 3.75px ? -> 多少个vw == 100px -> 26.666667vw -> 100px
所以fong-size：100px == font-size：26.666667vw
了解了vw的原理我们只需要对上述案例的代码进行小小的带动就可以了，如下所示：
html{font-size: 26.666667vw;}
这样无论任何设备下，就都可以自动运算转换进行适配了。
3.拓展 在实际操作中计算也是很容易的，如果设置的数值因为种种需要不好计算，比如font-size:75px,那我们也可以用vscode中的插件px to rem
（图4）
然后按上图设置一下，无论需要跟元素的font-size是多少，只需要改动px-per-rem的数值就可以了，比如我这里设置的就是100，然后回到代码页面选中需要改动的代码，按下快捷键alt+z就可以全部改成rem了。