我怎么适配？这个问题很多大佬都提出了方案，什么rem，vw，各种玩法我要适配的是什么，适配成怎样？这个问题，基本就少有大佬提到。我们连目标都不清晰，就各种适配方案弄得风生水起了。移动端有一句话，文字流式，控件弹性，图片等比缩放（控件指的是Header组件，列表的ListItem等）。那在我们前端是又是什么规则？我看过不少项目，全程rem，或者vw（除了某些样式如1px的border）。那我们适配，就是尽量把每个元素等比缩放？这样就ok了？针对第二点的末尾，每元素都等比缩放，那我大可以把viewport设置width为750，然后里面全用px，基本上所有的分辨率都自动适配呀，那搞rem，vw还有什么意义，不是否定他的意义，而是目前还不能理解他的好，好在哪里？欢迎大佬们来解答。

750的设计稿引入JS http://static.leiting.com/lib... 640的设计稿引入JS http://static.leiting.com/lib... 使用移动端文档头 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"> 布局就正常切图 nPX/100即可例如：10px=.1rem 至于为啥是/100 document.documentElement.clientWidth/7.5 OR document.documentElement.clientWidth/6.4 使用REM主要是 REM是根据body的font-size来计算上面的算法就是计算 body的font-size，然后赋值给body document.documentElement.style.fontSize=document.documentElement.clientWidth/7.5+'px'

方案我就不说了，很多地方能找到。目的是达成在不同手机上，能够有同样的显示效果。因为不同手机分辨率不同，主流有 320/360/375，非主流还有 432 之类，所以如果你要针对所有分辨率都做一套效果就很麻烦，保不齐这里多一点那里少一点，所以用偷懒的首发节省工作量。实际上我不支持这种做法，具体就不谈了。至于你说的 viewport=750 的做法，我记得不行，你可以试一下。

记得安卓低版本系统不兼容手机旋转之后也会放大页面如果放到app里也会不生效

rem, vw等适配方案的意义

笔迹

发布于
2018-07-18

更新于
2018-07-18

我怎么适配？
这个问题很多大佬都提出了方案，什么rem，vw，各种玩法
我要适配的是什么，适配成怎样？
这个问题，基本就少有大佬提到。我们连目标都不清晰，就各种适配方案弄得风生水起了。移动端有一句话，文字流式，控件弹性，图片等比缩放（控件指的是Header组件，列表的ListItem等）。那在我们前端是又是什么规则？我看过不少项目，全程rem，或者vw（除了某些样式如1px的border）。那我们适配，就是尽量把每个元素等比缩放？这样就ok了？
针对第二点的末尾，每元素都等比缩放，那我大可以把viewport设置width为750，然后里面全用px，基本上所有的分辨率都自动适配呀，那搞rem，vw还有什么意义，不是否定他的意义，而是目前还不能理解他的好，好在哪里？
```
欢迎大佬们来解答。
```

javascript