手机端如何适配

1. 给html的heder标签添加如下标签

<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：用户是否可以手动缩放。

2. 使用rem 单位 （可引入插件postcss）
   rem是指相对于根元素（即html元素）的字体大小的单位。
3. 使用flex布局及响应式布局
   Flex弹性和布局能够非常灵活的应对各种屏幕分辨率的适配
   响应式布局兼容性好，可以跨平台，但是代码冗余，浪费流量，在大型网站不建议使用。