本文同步发表在我的个人博客-vw+rem移动端自适应布局不管是面试还是工作流程，移动端的布局都是比较常见的，移动端适配方法也是五花八门。一般来说，我们主要从视口、rem、百分比入手。一般来说，在开发过程中，我们希望能够直接根据设计图纸进行开发。无论设计图是双倍还是三倍，我们都可以直接写出设计图的尺寸，无需转换，同时拥有高质量的设计还原。想想都爽。下面是一个使用vw和rem进行布局的方案。这个方案的主要思路是设置viewport的宽度为device的宽度，使用vw动态设置根元素的font-szie，使用sass的css函数实现转换的功能设计大小为rem，从而实现一个不需要js计算的集合。自动设置根元素font-szie的rem布局。不了解vw的同学可以了解一下vw。vw代表当前视口宽度的百分之一。rem布局过程依赖于根元素的font-size属性。如果设置固定的font-size，然后使用rem进行布局，小屏手机视觉上会感觉网页放大了，而大屏手机会出现网页布局稀疏。因此，我们需要根据收据的屏幕大小，按比例设置font-size，从而达到大小屏手机视觉效果一致。实现这个功能可以在页面加载的时候用js读取屏幕宽度，然后根据设计图的标准宽度做一些转换。vw的使用自然是根据屏幕宽度计算的长度单位，完美实现了上述js计算功能。同时在移动端，vw的兼容性也不错，可以直接使用。计算方法：//设计图标准根元素字体/设计图标准宽度*100constvw=16/750*100例如设计图以6s为标准，尺寸翻倍，宽度为750px，且你设置根元素的字体大小为16px，那么计算出来的vw就是2.13333vw，直接在css中设置：html{font-size:2.13333vw;}此时根元素下的实际字体大小标准宽度为16px。如果是在5s手机上，根元素元素的实际字体大小是13.653px。根元素的字体大小发生了变化，页面上使用rem设置的边距、长度、字体大小都会发生变化。页面看起来缩小了一点，但是所有的布局都和6s一样。6s显示效果：5s显示效果：可以看出效果一致，换行截断一致，视觉效果也一致。横屏显示在我们日常使用中，手机都是竖屏显示，但也有横屏显示的时候。如果屏幕水平显示，则手机的宽度变为长度，长度变为宽度。这时候vw的显示是错误的。看下图，虽然显示不乱，但是字符变大了，复杂情况下估计排版乱了。好在有办法处理：vmin，这个属性表示视口的最小宽度，竖屏是vw，横屏是vh。设置vim后，显示效果不错。自动转换的rem设计图的设计尺寸通常是原来的两倍或三倍。如果我们这时候转成doubled再根据根元素计算rem，就太累了。比如2倍设计图上的56px，那么我们需要：56/2/16，心态崩了~~~自己算是不行的，找个插件，这个轮子已经造好了，postcss-pxtorem这里特地来做，配置设计尺寸和设计倍数，然后直接在css中写56px，插件会帮你计算为(56/2/16)px，不是吗很棒吗？加载和配置插件也很麻烦。如果正好在sass之类的css预处理器中，可以使用sass函数自动计算。$rootSize:16px!default;$designWidth:750px!default;$designRatio:2!default;@functionrem($px){@return$px/$rootSize/$designRatio*1rem;}@functionrootVw(){@return$rootSize/$designWidth*$designRatio*100vmin;}这样一次性计算出根元素的font-size，也可以使用rem()自动计算出rem。html{font-size:rootVw();}body{padding:rem(15px);}这样就完成了一个简单易用的移动布局~~
