• CSS Media Query：媒体查询

• rem 布局

• vw/vh 布局

• 固定设备宽度为 UI 稿宽度，开发全部按照 UI 稿尺寸进行编写，将缩放适配等工作交由浏览器自动完成

var $_DESIGN_LAYOUT_WIDTH = 414
<meta name="viewport" content="width=$_DESIGN_LAYOUT_WIDTH ,user-scalable=no,viewport-fit=cover">

// 375 设计稿
<meta name="viewport" content="width=375, user-scalable=no, viewport-fit=cover">

// 414 设计稿
<meta name="viewport" content="width=414, user-scalable=no, viewport-fit=cover">

// 正常的 viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">

优点：

• 设置简单 —— 只需要一行代码，与其他适配方式相比，大大解决了代码量和计算量。
• 无需考虑适配 —— 缩放和兼容交给浏览器，开发人员完全按 UI 稿进行开发即可。
• 还原精准 —— 绝对等比例缩放，可以精准还原视觉稿。
• 方便测试 —— 在 PC 端即可完成大部分测试，手机端只需酌情调整一些细节即可。

缺点：

• 像素丢失 —— 对于一些分辨率较低的低端手机（此类问题常见于低端 Android 机，非 2x/3x 屏幕手机），可能设备像素还未达到指定的 viewport 宽度，此时屏幕的渲染可能就不准确了，比较常见的是边框“消失”了。（考虑低端机的占比，此类问题就可以忽略）

• 缩放失效 —— 某些安卓机不能正常的根据 meta 标签中 width 的值来缩放 viewport，此时就需要需要搭配 initial-scale 来进行缩放了（同理，大部分手机都没问题）。