学习内容：

REM是什么
REM与EM的区别是什么
手机端方案的特点
使用JS动态调整REM
REM可以与其他单位同时存在
在SCSS里使用PX2REM

一、REM是什么

它整体是一套手机专用的自适应方案

1.了解下REM是什么

单位	全称	中文	解释
px	Pixel	像素	图片或者图形的最小单位
em	emphasize	相对长度单位	可以理解为一个m的宽度
vh	viewport heiht	视图高度单位	100vh就是视图高度
vw	view weight	视图宽度单位	100vw就是视图高度
rem	root emphasize	根元素相对长度	根元素的font-size

具体的详细的全面的可以看官方文档： CSS 的值与单位 - 学习 Web 开发 | MDN (mozilla.org)

em和rem很像，但是毫无关系，就像Java和JavaScript，不要弄混了。

2.使用REM

font-size可以改变元素的字体大小，页面中的font-size默认是16px
这个font-size也时候也和浏览器的设置有关，有些浏览器可以进行更改，Chrom可以设置最小为12px
rem就是一个根元素(html)的font-size

了解rem含义的示例

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>rem</title>
    <style>
        html{
            font-size : 20px
        }
        body{
            font-s
        }
        p{
            font-size : 2rem
        }
    </style>
</head>
<body>
<p>你好，我是Yuyuan</p>
<span>第二行字</span>
</body>
</html>

所以，p中的内容会是html的font-size的两倍，就是40px；而span中的font-size先是继承html的20px，然后又被body的30px覆盖，最后呈现30px。

二、REM和EM的区别是什么？

前面我们以及REM就是一个根元素的高度，那em是什么呢，它们又有什么区别？

em是一个字的高度
rem是一个根元素的高度

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>rem</title>
    <style>       
        p{
           border:1px solid red;
           height : 2em
        }
    </style>
</head>
<body>
<p>你好，我是Yuyuan</p>
</body>
</html>

三、手机端方案的特点

需要做界面，一定需要设计图，如果是做响应式，一定需要四幅图，分别是：窄屏pc图、宽屏pc图、手机移动端图、ipad图。

什么是响应式？不同的屏幕得到不同的样子就是响应式。

但是手机的屏幕也是有不同的宽度，这就导致，展示的时候，和预想的布局出现很大的偏差。

两个方案。

全部使用百分比布局
按比例缩放

1.全部使用百分百布局

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width'>
<title>百分百布局</title>
<style>
    *{
        padding:0;
        margin:0
     }
     .clearfix::after{
         content:'';
         display:block;
         clear:both
     }
     .child{
         background : #ddd;
         float : left;
         width: 40%;
         margin : 10px 5% 10px 5%;
         text-align : center
     }
</style>
</head>
<body>
    <div class='parent clearfix'>
        <div class='child'>40%</div>
        <div class='child'>40%</div>
        <div class='child'>40%</div>
        <div class='child'>40%</div>
    </div>
</body>
</html>

但是这样面临一个问题，就是当宽度取百分比的时候，高度就很难去配合宽度使用了。

于是就有了这样的思路：元素rem ----> html的font-size ---JS---> page width

<!DOCTYPE html>
<html>
<head>
 <meta charset='utf-8'>
 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">

 <title>rem与百分比占比</title>
 <script>
     const pageWidth = window.innerWidth
     document.write('<style>html{font-size:'+pageWidth+'px}</style>')
 </script>
 <style>
     *{
         padding:0;
         margin:0
     }
     .clearfix::after{
         content:'';
         display:block;
         clear:both
     }
     .child{
         font-size:24px;
         text-align:center;
         background:#ddd;
         float:left;
     }
     .child{
         width:0.4rem;
         height:0.2rem;
         margin:0.05rem 0.05rem
     }
 </style>
</head>

<body>
    <div class='parent clearfix'>
        <div class='child'>40%</div>
        <div class='child'>40%</div>
        <div class='child'>40%</div>
        <div class='child'>40%</div>
    </div>
</body>

</html>

这就是动态REM

获取页面的宽度：window.innerWidth
将html的font-size设置为页面宽度：document.write('<style>html{font-size:'+window.innerWidth+'px}</style>')
将width和height都用rem做相对于html的百分比定位

四、使用JS动态调整REM

在取屏幕宽度与html的font-size的时候，可以取pageWidth/100，这样写百分比的时候就不用写小数了width:40rem。
如果有限制最小的是12px，那么调整的时候小于12px的rem部分会被替换为12px。
一些绝对的显示。要计算1px换算成rem吗？里面的文字也用rem作为单位吗？1px以及非常小了，就不用换成rem，而内部的文字可以直接写死成px。

五、在SCSS里使用PX2REM

为什么使用SCSS

在使用rem作为单位之后，能使用px之类的其他单位
但是，这样的换算非常麻烦，所以使用SCSS

使用SCSS的难点：

图形化界面使用习惯，不会用命令行。
不会英语
不会看文档

安装scss mac：

解决访问慢的问题：使用淘宝源，使用命令为：npm config set registry https://registry.npmmirror.com/
设置变量 sass_binary_site，指向淘宝镜像地址。编辑一下zshrc：

vi ~/.zshrc  //进入目标文件
export SASS_BINARY_SITE = '
https://npm.taobao.org/mirrors/node-sass/'
:wq//保存退出

进入官网下载：Sass: Install Sass (sass-lang.com)

npm i -g node-sass

window：

yarn add -D node-sass@npm:sass
yarn global add sass

使用SCSS

翻译scss成css

sass --watch scss-demo/scss:scss-demo/css

scss中使用PX2REM函数

@function px2rem($px){
    @return $px/$designWidht *100 + rem;
}
$designWidth : 640 ; //设计稿宽度

.child{
    width:px2rem(40);  //写px会自动转换为rem单位
    height:px2rem(20);
    margin:px2rem(5) px2rem(5)
}

移动端：动态REM