动态REM前言 px 像素 em 一个 M 的宽度 rem (root em) 根元素（html）的 font-size

前言

px 像素
em 一个 M 的宽度
rem (root em) 根元素（html）的 font-size 大小
vh (viewport height) 视口高度 100vh == 视口高度
vw (viewport width) 视口宽度 100vw == 视口宽度

MDN 对 rem 的描述

12像素法则

网页默认 font-size 是 16px
Chrome 字体字号默认最小12px, 也就说 Chrome 设置了最小字号为12px，即使咋们给字号设置 6px，那么它的最小字号也是 12px, >= 12px

rem 和 em 的区别

<body>
  <p>H幂</p>
  你好
</body>

body {
  font-size: 20px;
}
p {
  font-size: 2rem;
}

问：p的字体大小是？
答： 32px
why? => rem 是指根元素的 font-size 大小，根指的是 html, 不是 body
问：你好的字体多大？
答：20px \

p {
  border: 1px solid  red;
  height: 2em;
}

问：高度是多少？
答： 32px
也就是说 1em == 自己这个元素的font-size 的大小 \

手机端方案的特点

0～320 一套 CSS
320～375 另一套 CSS
375～414 第三套 CSS

响应式

百分比布局 (宽度和高度无法做配合，因为宽度不确定)
整体缩放（不知道比例是多少，故引入了 rem 方案）一切单位以宽度为基准，就能保证完美还原。
故不以 px 、em rem 为单位，因为它们与屏幕的宽度没关系。
既然什么单位都和屏幕宽度没关系（vw可以），那该咋办？
那么就退而求其次选择 rem

动态 rem

让 html 的 font-size == page width 如何做呢？
使用 JS 来做，设置JS使 font-size == page width ，正因为 rem 是依赖 font-size 的，设置后那就会间接依赖宽度

var pageWidth = window.innerWidth
document.write('<style>html{font-size:' + pageWidth + 'px;}</style> }')

上面的代码表示 1rem == html font-size == 1 page width

优化

使用 meta viewport

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">

从 pageWidth 来找答案 font-size = pageWidth/100

var pageWidth = window.innerWidth
document.write('<style>html{font-size:' + pageWidth/100 + 'px;}</style> }')

但是这个的 font-size 可能是一个 <10 的值(320/100)，在 Chrome 里会有问题（最小12px）
于是再次优化
font-size = pageWidth/10

var pageWidth = window.innerWidth
document.write('<style>html{font-size:' + pageWidth/10 + 'px;}</style> }')

但是这个会带来 1px 的问题
假设屏宽 640px, 1px => (1/640) * 10 = 0.015rem,计算得出它比 1px 还要小
那么该如何解决？自己写 1px 就行就不要去换算 rem 了，字体的写成 font-size: 16px,rem 和 px可以混用 \

px 自动变为 rem

使用SCSS
这里有我的一篇关于 SCSS 的基础教程

如何使用命令行部署 SCSS

npm config set registry registry.npm.taobao.org/
touch ~/.bashrc
echo 'export SASS_BINARY_SITE="npm.taobao.org/mirrors/nod… >> ~/.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

在 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: px(16);
}