作者：子非鱼转发链接：https://mp.weixin.qq.com/s/uQ8c2Z6GJr4eyH3kidZt3g
前言随着Web技术的创新，移动适配方案也在不断变化。网上有很多关于移动适配的文章，说rem布局已经过时，vm适配是最好的适配方案。有这种认识的同学就错了，任何适配方案都有利弊，要根据自己的使用场景来选择。
边肖在前面也发表过几篇关于手机改编的文章，下面我们一起来回顾一下：
《手把手教你绕过移动端适配大坑》
《吃透移动端 1px从基本原理到开源解决方案》
《吃透移动端 H5 与 Hybrid实践踩坑12种问题汇总》
本文先说几种常见的适配方案，再看看几大厂商(腾讯、JD.COM、网易、小红书、微博、美团、哔哩哔哩、搜狐、饿了么、携程、大众点评、知乎、拍拍贷、lufax)的移动页面都采用了哪些适配方案。最后讨论了各种适应方法的应用场景和优缺点。如有错误，希望能得到。
对移动终端适配的再思考
一
移动适配是用rem还是vw？并不是所有的场景都适合用rem或者vw来改编。
vw和rem适配的本质是等比例缩放，使页面在不同屏幕尺寸下具有类似矢量图片缩放的效果，保证页面元素的缩放比例和位置。这两种适配方案适用于多种视觉组件，视觉设计与元素位置的相对关系强烈依赖于移动页面。基本上，大部分页面都可以通过这两种方案进行适配。但对于内容较多的文字，我们希望引导用户沉浸在更多的内容中，而不是更大的内容中。这种比例缩放方案不能满足要求。我推荐直接用px结合flex等布局方式来适配。2
雷姆应该被抛弃。大众不好闻吗？Vm适配不是万能的，最好配合rem。
当初使用rem的方案之所以流行，正是因为当时浏览器对视口单位的支持并不理想(IOS 8，Android 4.4，见视口单位caniuse)。比rem好太多了(iOS 4.1和Android 2.1见caniuse)，所以对于vw来说，在当时的大环境下，前端说爱你并不容易。前端技术的革新，最重要的是各大浏览器厂商的努力。除了Opera Mini的完整版和IE的低配版，其他浏览器基本都已经支持vw了，也有一些人或团队开始探索和讨论在实际项目中的使用。虽然沙漠老师在文章《再聊移动端页面的适配》中提出的vw方案为了兼容使用了viewport-units-buggyfill库，但我个人并不推荐。由于本库使用css内容属性进行兼容性处理，官方文件指出影响部分浏览器的img标签，需要全局引入一个css规则。另外对于需要正常使用内容的情况(比如图标字体)也会造成不可避免的冲突，而且也不支持伪元素的兼容。所以从我个人的角度来说，如果你一定要问我用什么样的大众适配方案，我会把大众rem的以上两个方案推荐给你。虽然vw改编的页面效果不错，但是是以视口为单位实现的布局，视口大小自动缩放。无论视口太大还是太小，它也会因为视口太大或太小而失去最大和最小宽度的限制。
移动终端适配方案1
Rem适配rem适配的本质是布局的比例缩放，rem的大小可以通过动态设置html的font-size来改变。
在视口配置12中，比例被设置为视口的1倍的固定大小，或者视口可以根据dpr的值进行缩放，如下所示：
1//以下是根据设备dpr设置的viewport 2 var DPR=window . device pixel ratio | | 1 3 var scale=1/DPR 45 viewport . set attribute(6 ‘ content ‘，7′ width=device-width’ 8 ‘)。Initial-scale=’ 9scale 10 ‘，maximum-scale=’ 11scale 12 ‘，minimum-scale=’ 13scale 14 ‘，user-scale=no ‘ 15)有几点需要注意。
视区标签仅对移动浏览器有效，对PC浏览器无效。当缩放比例为100%时，逻辑像素=CSS像素宽度=理想视口宽度=布局视口宽度。单独设置初始比例或宽度会有兼容性问题，因此将布局视口设置为理想视口的最佳方法是同时设置这两个属性。即使设置了user-scalable=no，也可以在Android Chrome浏览器中强制启用手动缩放。设置rem参考值的核心代码如下
1//set1rem=逻辑像素(设备无关像素)/102 functionsetremunit(){ 3 varrem=document.documentelement.clientwidth/104//375/10=37.55 docel . style . font size=rem ‘ px ‘ 6 } 7 setremunit()
将html节点的字体大小设置为页面clientWidth的1/10，即：1rem=布局视口的1/10。iphone6下：docEl.clientWidth=设备无关像素(逻辑像素)=布局视口宽度=理想窗口宽度=375。此时：1 rem=375/10px=37.5 xpostcss-px torem将单位转换为rem 1 module . exports={ 2 plugins 3360 { 3 ‘ AutoPrefixer ‘ 3360 { 4 browsers 3360[‘ Android=4.0 ‘，’ iOS=7′] 5}，6 ‘ post CSS-px torem ‘ : { 7 root value 336037.5，8 proplist 3360[‘ * ‘！font-size’]，9 selectorblacklist :[‘ van-circle _ _ layer ‘，’ ignore’]，10}11}12}
RootValue是px转换的基准值。参考iPhone6，设备宽度为375px。规则：基准值=当前器件宽度的十分之一。在基准值设置代码中，iPhone6设备中设置的HTML-font-size也是37.5px，但设计稿大小是750px。所以在测量设计稿的尺寸时，需要除以2rem版面。在响应式布局中，根元素font-size的大小必须由js动态控制，这意味着css样式和js代码之间存在一定的耦合，改变font-size的代码必须放在css样式之前。
注射毒品
大众适应
Vw是基于视口的长度单位，其中视口是指浏览器的可视区域，该可视区域是window.innerWidth/window.innerHeight,的大小，如下所示。
CSS值和单位模块三级中有四个与视口相关的单位，分别是vw、vh、vmin和vmax。
Vw:Viewport宽度的简称，1vw等于window.innerWidth的1%vh:类似于vw，是Viewport高度的简称，1vh等于window.innerHeihgt的1% vmin，vmin的值是当前vw和vh的较小值，VMAX是当前VW和vh的较大值。如果设计草图使用750px的宽度，vmin的值更高。然后我们就可以直接把设计图上的px值转换成对应的vw值。如果不想自己计算，可以用postcss的插件postcss-px-to-viewport，这样就可以直接在代码里写px了。
1{ 2loader:’postcss-loader ‘，3 options : { 4 plugins :()=[5 require(‘ autoprefixer ‘)({ 6 browsers :[‘ last 5 versions ‘]7 })，8 require(‘ post CSS-px-to-viewport ‘)({ 9 viewport width :375，//viewport width(number)10 viewportheight :1334，/，//viewport height(number)11 unit忽略“，”。发际线’]，//不需要转换的类名(数组)14minPixelValue:1，//设置最小像素值(数字)替换15 15 mediaquery : false////允许转换px(true/false)16})17]18}
3
带大众和rem
将随视口变化的vw单元设置为根元素的大小，从而动态改变其大小。用body加上最大和最小宽度限制根元素的最大和最小字体大小。1//rem单位换算：75px只是方便操作，750px-75px，640-64px，1080px-108px，以此类推2 $ 2 $ vm _ fontsize:75//iPhone6 size根元素大小参考值3 @ function rem($ px){ 4 @ return($ px/$ VM _ fontsize)* 1 rem；5} 6//根元素大小使用vw unit 7 $ vm _ design:7508 html { 9 font-size :($ VM _ fontsize/($ VM _ design/2))* 100 VW；0//同时通过MediaQueries将根元素的最大值和最小值限制为11 @ MediaScreenand(max-width 3360320 px){ 12 font-size 336064 px；13 } 14 @ mediascreenand(min-width :540 px){ 15 font-size :108 px；16}17}18//body还增加了最大和最小宽度限制，以避免默认的100%宽度块元素跟随body并大于19 body { 20 max-width 3360540 px；21m in-width :320 px；22}
四
Px适应
如开头所述，并不意味着移动终端必须使用相对长度单位。传统的响应式布局还是不错的选择，尤其是在新闻、社区等可读性更强的内容场景，直接使用px单元可以创造更好的体验。Px方案可以让大屏手机显示更多的内容，更符合人们的阅读习惯。
大型工厂对互联网的适应性研究
一个
快速眼动适应的例子
1.1固定1x vieport注：下面描述的rem和px的对应关系是设备独立像素为375px(iPhone6/7/8)时。
拍贷M站主页(https://m.ppdai.com/)
1rem=20px最大参考值为40px，页面宽度为750px。红宝书(https://www.xiaohongshu.com/)
1rem=50px最大基准值为60px。字体和页面被缩放以匹配媒体查询，正文的最大宽度被限制为1 @ MediaScreenand(min-width 3360768 px)2 body { 3 width 3360450 px！重要；4}微博(https://m.weibo.cn/)
而缩放字体和页面的参考值是媒体查询生成的1.2可缩放vieport。下面描述的rem和px的对应关系是设备独立像素为375px(iPhone6/7/8)，视口比例为0.5时。
美团(http://i.meituan.com/)
1rem=100pxB站主站(https://m.bilibili.com/index.html)
1rem=46.875px搜狐(https://m.sohu.com/)
1rem=75px
2
虚拟机改编示例pats贷款页面(https://ld.ppdai.com/loan/mobile_base/373/25999)
没有页面宽度限制，没有兼容性处理，个人不推荐。
三
JD.COM(https://m.jd.com/)的vm rem适应示例
Vieport是固定的，以rem为单位的html元素的字体大小是vw px fallback的形式。当页面超过一定宽度时，根据媒体查询将字体大小设置为px，优先级高于vw。将页面宽度限制为1080pximage.png。
网易(https://3g.163.com/touch/)固定视口，元素布局使用rem单位的html元素的font-size，使用vw px fallback，根元素font-size中px的值通过媒体查询设置。当页面超过一定宽度时，px单元的优先级高于vw。受限制的布局宽度为768像素。饿吗？(https://h5.ele.me/msite/)视口已被缩放。html元素的字体大小仍然由px指定。vw rem fallbak用于特定元素的布局。布局宽度没有限制。css构建过程需要插件支持。请参考这个插件：panda Gao/Styles-PX-to-Relative-Unit。
四
携程旅行网(https://m.ctrip.com/html5/)px项目示例
1折固定vieport布局方案：px flex percentage将正文的最大宽度设置为max-width : 540 px；公众意见(https://m.dianping.com/)
元素丰富，px flex布局，适配效果好，知乎(https://www.zhihu.com/)
阅读体验场景，使用px布局。腾讯(https://xw.qq.com/)
头版的主要内容是新闻。为了更好的阅读体验，使用了px布局。lufax(https://m.lu.com/)
: root { font-size :10 px；}，不根据屏幕的大小设置不同的字体大小。有一个问题：当布局页面设置为1rem时，chrome浏览器中有任意12px，不是10px布局。虽然在10PX布局中使用了rem单位，但它仍然是一个绝对的单位方案。也许用户可以在大屏手机上看到更多的内容。
总结新闻、社区等可以多读的场景：px flex percentage有很多种视觉成分，视觉设计非常依赖元素位置的相对关系。以上vw rem只是我的一点拙见，也是我这两年在手机适配上做的一些探索。如有错误，请各位大神指正。作者：子非鱼转发链接：https://mp.weixin.qq.com/s/uQ8c2Z6GJr4eyH3kidZt3g
暂无讨论，说说你的看法吧
