html前端 rem布局，完美兼容各手机端的尺寸，自适应布局

1. 先下载一个淘宝的js（http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js）

用法说明：

我这里用的scss，当然没用这些样式预处理器也没关系，下面会让你怎么做，因此需定义转换函数

$w: 75; //psd 设计图尺寸除以10
@function rem($n) {
  @return ($n/$w) + rem;
}

$w 说明：

1.该为设计图页面总宽度尺寸除以10

3. 接着用法：

.main{

    width: rem(700); //某个main类的宽度在设计图是700px。

    font-size: rem(28); //我这里为了偷懒，直接用rem去写。但值得注意的是

    //所有关于字体的行高line-height, font-size 都需要在设计图原有的尺寸+4.

    //譬如 字体在设计图是24px，而用rem去转换时，需要 24+4也就是 rem(28)

    //为何+4？因为放手机大小，具体+多少，自己来定，但是+4是最合理，因为和设计图的字像素一毛一样

}

4. 完蛋，我是新手，没用scss，sass等预处理器怎么办？？

给个建议，先去学下scss语法，非常简单，类似搬砖工作。

接着点击这个网址 https://www.sassmeister.com/

如果这个网址打不开，自己搜下翻译工具吧

把scss代码粘贴这个网站左边框，右边就会编译成css的代码咯