移动端是怎么做适配的？

1.meta viewport

通过在 HTML head标签上加入 上图代码，来实现手机适配，注意：做手机 页面一定要加上这段代码。

上图content 代表的是 设备宽度。user-scalable 为页面缩放，等于NO，就是不准用户缩放。

上面代码 可以 有效防止手机页面模拟980像素宽度，防止页面在用户双击的时候放大，防止用户两指缩放页面。

不加 获取到的页面宽度

加上 获取到的页面宽度

2.媒体查询

允许内容的呈现针对一个特定范围的输出设备而进行裁剪，而不必改变内容本身。

上面代码 意思就是 媒体最大宽度 为800是（0-800），该媒体 背景颜色为 红色。

利用 这一 便利性，可以实现 当 媒体条件满足移动端适配条件 时添加移动端 样式，满足PC端时添加pc端样式.

3.动态 rem 方案

借助js实现 比例适配，

借助上面这段js代码 实现适配， 因为1rem 等于 html font-size大小，所以 让html font-size等于页面宽度，

然后适配的时候 写 零点几 rem 布局适配 。

 在scss里使用PX 自动转 REM

下面代码配置 node-scss

npm config set registry https://registry.npm.taobao.org/

touch ~/.bashrc

echo 'export SASS_BINARY_SITE="https://npm.taobao.org/mirrors/node-sass"' >> ~/.bashrc

source ~/.bashrc

npm i -g node-sass

mkdir ~/Desktop/scss-demo

cd ~/Desktop/scss-demo

mkdir scss css

touch scss/style.scss

start scss/style.scss

node-sass -wr scss -o css

编辑 scss 文件就会自动得到 css 文件

在 scss 文件里添加

@function px( $px ){

  @return $px/$designWidth*10 + rem;

}

$designWidth : 640; // 640 是设计稿的宽度，你要根据设计稿的宽度填写。如果设计师的设计稿宽度不统一，就杀死设计师，换个新的。

.child{

  width: px(320);

  height: px(160);

  margin: px(40) px(40);

  border: 1px solid red;

  float: left;

  font-size: 1.2em;

}

即可实现 px 自动变 rem