前一段时间回答了个问题，很多朋友还在用很老的思路去做移动端适配，今天写一篇文章，希望能帮助到大家，也希望大家能够多多交流，共同进步。
应该废弃的方案
rem
根据分辨率算出一个值，修改根字体大小，使用rem做布局，这样的问题在于，更大的屏幕更大的内容，你可以在ipad 预览一下，是多么糟糕，而且这个方案对视力障碍人群很不友好，如果用户将浏览器默认字体大小改了，你为了还原设计稿再给改回去，在手机上是美观了，用户也看不见了。
vw/vh
vw/vh 是可以用的，但是不应该用于布局
flexible
不解释了，自己去github上看看
重要的 viewport meta
<meta name="viewport" content="width=device-width, initial-scale=1" />
请仔细阅读 MDN 上的解释，这个标签是非常重要的，它决定了你的页面在移动端的显示效果，rem 和 flexible 就是早年 viewport meta 浏览器支持还不好时的产物，
如果还不懂，自行google 物理像素、逻辑像素、CSS像素，viewport
推荐的方案
纯移动应用其实很简单grid + flex 就够了，如果做响应式就加上 media query
单位使用px 可以rem也可以，这个需要和设计师提前约定好，主要看页面元素要不要跟着根字体大小改变。注意如果使用rem，那么根字体大小应该是默认的16px,尽量不要通过程序改它。
实际开发中我们会用不同组件库，比如MUI,antd,Vant 等，他们都提供Grid和Space之类的布局组件，请务必熟悉他们的使用方法，别自己写css了
为什么前端工程师会痛苦
前端工程师的工作的内容之一是还原设计稿，但是如果设计稿就是一坨翔呢，很多小公司的UI设计师都在用平面设计的思路做UI设计，他们只会绝对定位式的把组件放在某个位置，根本不会考虑布局，不信你们可以问问公司的设计师，知道啥是栅格布局啥是弹性布局吗。
UI设计师都没有这些概念，所以前端工程师写布局就会痛苦，只能基于自己的理解去还原去适配不同屏幕。举个例子，比如设计稿基于iPhone X 宽度375px 设计，一行内有两个box，左边宽159px，右边宽200px，间隔16px,那么请问当在iPhone 12 pro 宽度390px 如何展示。 你肯定有很多方案，比如间隔变大，或者弹性布局某一边固定，另一边自动，或者栅格布局。可是TMD这件事应该是UI设计师做的，他们应该知道怎么做，而不是让前端工程师去猜。
破局
- 多与设计师沟通讨论，灌输现代布局的一些概念，并且让他们有这些概念并生产中使用
- 建议设计师，布局时使用
Grid,Space等组件，不要像之前那样直接拖过去，然后改改位置就完事了 - 给UI灌输他们是UI设计师，是软件工程的一部分，不是平面设计师。
