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
网友评论