移动端适配方案（手机专用，iPad和电脑都不可以用）。
REM是什么
-
rem MDN查看rem的含义
这个单位代表根元素的font-size大小（例如<html>元素的font-size）。当用在根元素的font-size上面时 ，它代表了它的初始值(译者注:默认的初始值是html的默认的font-size大小,比如当未在根元素上面设置font-size大小的时候,此时的1rem==1em,当设置font-size=2rem的时候,就使得页面中1rem的大小相当于html的根字体默认大小的2倍,当然此时页面中字体的大小也是html的根字体默认大小的2倍)。
该单位在实际使用中一般用于创建完美的可扩展布局。如果不被目标浏览器支持，可以使用em单位，虽然会稍微复杂一些。
rem：根元素的font-size的大小，（根元素html元素）。REM的主要思想:缩放。
- 长度单位：
-
px：像素 -
em：一个M的宽度或者一个汉字的宽度。 -
ex：一个X的高度。 -
rem：root em根元素的font-size的大小，（根元素html元素,html的font-size：16px；那么rem就是16px）。 -
vh：viewport视口高度。100vh = 视口高度。 -
vw：viewport width视口宽度。100vw = 视口宽度。
十二像素法则：font-size不能小于12px。
- 网页的默认
font-size是16px，有的是14px,但是通过对浏览器默认字体进行设置，可以改变默认font-size的大小 - chrome浏览器，设置了最小
font-size后，如果取值比这个设置值小，是没有效果的。默认最小值是12px。（只针对chrome有效） -
rem只与根元素有关。
rem和em的区别：
- 一个
em的宽度和高度是一样的。 -
1em就等于自己的font-size像素值。 -
rem就是根元素的font-size像素值。
动态REM。
如果没有设计图（窄屏、宽屏、iPad屏幕、手机屏幕。），就不设计响应时。
- 响应式：不同的屏幕得到不同的样式。
- 作页面的流程：
- 有没有两张图。
- 有：pc版和手机版本，没有：不做。
- PC版本：
float / flex布局,定宽1000px。 - 手机（各种品牌各种型号的手机的兼容）。不能定宽。（最少要收集20款手机浏览器的分辨率，记住。响应式：0~320 一套CSS；320~375 一套CSS；375~414 一套CSS。）
- 手机上没有办法做到响应式布局
- 手机上可以做到：百分比布局（不写死宽度，自适应）；整体缩放（保证每个东西的比例大小不变，整体自适应）。
- 手机屏幕
- iPhone5/SE: 320 X 568
- iPhone6/7/8: 375 X 667
- iPhone6p/7p/8p: 414 X 736
- iPhonex: 375 X 812
- ipad: 768 X 1024
- ipad pro: 1024 X 1366
- GS5: 360 X 640
- nexus: 412X 732
百分比布局：
- 优点： 可以在不同的屏幕上做宽度与高度自适应。
- 缺点：布局当中存在太多的不确定性，高度没有办法和宽度做任何的配合，因为宽度是不确定的。
百分比布局代码：
定宽定屏幕布局
假设只在320px的屏幕上正常显示，并且设置宽度为320px,使其在其他屏幕上看到的和320px的一模一样。
像素代码示例：
rem布局（所有元素按比例缩放）
- REM主要思想：缩放，解决宽度与高度无关联的问题。
一切单位以宽度为基准，就能保证完美还原设计稿，以rem为单位。（vw最好，但是兼容性差。） - 主要思想：
rem----- > html font-size = (js) page width
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo4</title>
<script>
var pageWidth = window.innerWidth
document.write('<style>html{font-size:' + pageWidth +'px; }</style>')
</script>
</head>
<body>
你好/*1rem = html font-size = 1 page width*/
</body>
</html>
对动态REM进行微调：
- 宽度的取值不用小数来表示，用数字。
- 要注意
font-size的取值不能小于12px。 - 像素比1像素还好，只会显示1像素。特别小的地方不要用
rem，比如border直接用px。 - 像素之间可以混用。
rem实现动态布局代码示例：
不会使用less / sass / scss / webpack的根源
- 不会用命令行。（没有窗口界面，只有命令行界面）
- 不会英语。
- 不会看文档。
在 SCSS 里使用 PX2REM
npm config set registry [https://registry.npm.taobao.org/](https://registry.npm.taobao.org/ "null")touch ~/.bashrcecho 'export SASS_BINARY_SITE="[https://npm.taobao.org/mirrors/node-sass"'](https://npm.taobao.org/mirrors/node-sass%22' "null") >> ~/.bashrcsource ~/.bashrc-
npm i -g node-sass
以上便：安装成功 mkdir ~/Desktop/scss-democd ~/Desktop/scss-demomkdir scss csstouch scss/style.scssvi scss/style.scss-
ruby的sass：用法sass --watch scss:css把scss变成css，变成之后不要动，会一直在监听，之后再打开一个Gitbase
1.png start scss/style.scss-
node-sass -wr scss -o cssnode-scss转换成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
