① 页面mata标签 设置viewport用户网页的可视区域 ``` <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> ``` ## 属性值详解 width=device-width：宽度等于设备宽度 initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。 maximum-scale：允许用户缩放到的最大比例。 minimum-scale：允许用户缩放到的最小比例。 user-scalable：用户是否可以手动缩放。 ② 使用rem 单位 rem是指相对于根元素（即html元素）的字体大小的单位。 ③ 使用flex布局及响应式布局 Flex弹性和布局能够非常灵活的应对各种屏幕分辨率的适配 响应式布局兼容性好，可以跨平台，但是代码冗余，浪费流量，在大型网站不建议使用。