移动端web开发相对于PC端web开发，不用兼容那么多浏览器了，还没有松一口气，随之而来的各种屏幕尺寸的适配问题，你会发现比PC端还要繁琐。
一。cover布局，就跟background-size的cover属性一样，保持页面的宽高比，取宽或高之中的较小者占满屏幕，超出的内容会被隐藏。此布局适用于主要内容集中在中部，边沿无重要内容的设计。在设计的时候可把左右隐藏掉了一部分，或者把上下隐藏掉了一部分。
二。响应式布局，简而言之，就是页面元素的位置随着屏幕尺寸的变化而变化，通常会用百分比来定位，而在设计上需要预留一些可被“压缩”的空间。其实就相当于页面被压矮了。
三。Contain布局，也跟background-size的contain属性那样，保持页面的宽高比，取宽或高之中的较大者占满屏幕，不足的部分会用背景填充。个人比较推荐用这种方式，但在设计上需要背景为单色，或者是可平铺的背景。在原始宽高比基础上，根据不同屏幕尺寸进行缩放，并加背景填充。
四。样式缩放。最省事的适配方法，直接用px为单位按视觉进行开发，然后通过计算屏幕与网页的宽高比，用transform:scale来对网页进行全局缩放。
不过此方法会有一个小问题，就是如果网页内有动画的话，缩放后会稍微降低页面性能，在低配的安卓机器上表现的比较明显，iOS上没发现有性能问题。
五。Rem缩放。最省事的适配方法，直接用px为单位按视觉进行开发，然后通过计算屏幕与网页的宽高比，用transform:scale来对网页进行全局缩放。不过此方法会有一个小问题，就是如果网页内有动画的话，缩放后会稍微降低页面性能，在低配的安卓机器上表现的比较明显，iOS上没发现有性能问题。
在完成设计后，为了检查是否真实适配手机，可以进行真实手机适配测试，我经常用TestBird的手游测试https://www.testbird.com/，感觉对于适配问题的发现很有用。