什么是rem？

• px: 像素

• em: 一个M的宽度，也可以说一个汉字的宽度

• rem: （root em）根元素（HTML）的font-size

• vh: （viewport height）视口高度 100vh===视口高度

• vw: （viewport width）视口宽度 100vw===视口宽度

12像素法则

网页的默认font-size是16px

Chrome的默认font-size是12px

• rem是一个根据HTML的的font-size变化的root em

• 做响应式，必须四个图，一个窄屏，一个宽屏的，一个手机，一个iPad

动态rem

百分比布局

• 缺点：无法定义宽度和高度，所以高度和宽度无法做配比。

写死大小

• 缺点： 屏幕大小改变时，布局会变丑

使用 JS 动态调整 REM

• 一切单位以宽度为基准，就能保证完美还原设计稿

手机端方案的特点

• 所有手机显示的界面都是一样的，只是大小不同

• 1 rem == html font-size == viewport width

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<script>
  var pageWidth = window.innerWidth
  document.write('<style>html{font-size: ' + pageWidth + 'px}</style>')
</script>

• REM 可以与其他单位同时存在

font-size: 16px;
border: 1px solid red;
width: 0.5rem;

安装sass：

• 安装yarn add -D node-sass@npm:sass(局部安装)

• 全局安装：yarn global add node-sass@npm:sass(不行就yarn global add sass)