动态rem移动端适配

首先我们先来认识css的一些长度单位：

px：像素

em：表示自身元素font-size的计算值，如果自身没设置font-size，则继承父元素font-size的计算值

rem：root rem   根元素font-size的计算值

vh：viewport  height     视口的高度

vw: viewport  width   视口的宽度

还有一些不常用的：

ex：这个单位表示元素font的 x-height 。在含有“X”字母的字体中，它是该字体的小写字母的高度；对于很多字体， 1ex ≈ 0.5em。

ch：这一单位代表元素所用字体 font中“0”这一字形的宽度（“0”，Unicode字符U+0030），或更准确地说是“0”这一字形的预测尺寸（advance measure）。

lh：等于元素行高line-height的高度

rlh：等于根元素行高line-height的高度

——摘自MDN    

 

手机端方案的特点

1. 所有手机显示的界面都是一样的，只是大小不同
2. 1 rem == html font-size == viewport width

使用css的rem属性来适配不同移动屏幕尺寸似乎是个不错的主意~~

通过js计算算出屏幕宽度，然后确定比例，于是每进入一次设备将会根据设备视口的宽度来调整比例。

例如设计图的宽度为320px，那么我们以320的基数设置html字体的font-size：12rem

const oHtml = document.getElementsByTagName('html')[0]
const width = oHtml.clientWidth;
// 320px的屏幕基准像素为12px
oHtml.style.fontSize = 12 * (width / 320) + "px";

这样iphone8（375px）下html的font-size 就是12*（ 375 / 320 ）= 14.0625px。

 

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

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

 

在 SCSS 里使用 PX2REM（命令行）

• npm config set registry https://registry.npm.taobao.org/
• touch ~/.bashrc
• echo 'export SASS_BINARY_SITE="https://npm.taobao.org/mirrors/node-sass"' >> ~/.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 文件里添加

@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。