1、什么是REM
动态 REM 是手机专用的自适应方案！
我们来了解下常见的长度单位：
- px：表示像素，是相对于显示器屏幕分辨率而言的相对长度单位；
- em：相对长度单位，这个单位表示元素的
font-size的计算值。如果用在font-size属性本身，它会继承父元素的font-size。也可以理解为 em 指字体高度，浏览器的默认字体为 16px，所以未经调整的浏览器都符合1em=16px。1em 指的是一个字体的大小，它会继承父级元素的字体大小，因此并不是一个固定的值； - rem：这个单位代表根元素的
font-size大小（例如 <html> 元素的 font-size）。当用在根元素的font-size上面时 ，它代表了它的初始值。例如：设置html { font-size: 20px }时，其他元素1rem = 20px，5rem = 100px； - vh：viewport height 视口高度，
100vh = 视口高度； - vw：viewport width 视口宽度，
100vw=视口宽度，1vw 等于 window.innerWidth 的 1%。例如：设备物理宽度为 375px 时，1vw = 3.75px；
12px 法则：网页默认的 font-size 为 16px，而 chrome 默认的最小字号为 12px，如果将 font-size 设置为 12px 以下，一律按 12px 显示！
2、JS动态调整REM
添加如下示例代码：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
var pageWidth = window.innerWidth // 获取页面的宽度
console.log(pageWidth)
document.write('<style>html{font-size:'+pageWidth+'px}</style>') // 将html字体大小设置为页面的宽度
3、将px自动变为rem
大致步骤如下：
- 切换淘宝源：
npm config set registry https://registry.npm.taobao.org/
- 编辑bashrc：
vi ~/.bashrc
- 并添加如下内容：
export SASS_BINARY_SITE="https://npm.taobao.org/mirrors/node-sass"
- 安装node-sass：
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
- 在style.scss头部添加如下代码：
@function px2rem($px) {
@return $px/$designWidth+rem;
}
$designWidth : 640; //设计稿宽度
- 运行
最后运行node-sass -wr scss -o css，就可以看到生成了一个 style.css 的文件，并且把 px 变为了 rem；
1415
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
