移动端布局rem如何使用

移动端布局关键是要设置meta标签：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />

布局使用 rem   em  px    百分比

下面重点说一下rem 的使用

1：浏览器根元素（html）默认的font-size的大小是16px 

这样的话如果我们想要使用rem 来完成布局，就需要用我们（测量的页面宽）/16 得到的就是rem 

例如：定义页面宽100 换成rem    

100/16=6.25rem

2:  自己定义浏览器根元素（HTML）的font-size的大小

例如：

html {
    font-size:20px;
}
.con{
    width:845/20=42.25rem;
}    

如果使用sass 

@function px2rem($px){

    $rem : 37.5px;

    @return ($px/$rem) + rem;

}

页面写的时候

height: px2rem(90px);

width: px2rem(90px);;

3:rem 基准值的计算

我们拿到的视觉图是什么样的，我们就可以用设计稿的宽/font-size 的大小，这个值随便定义，不想使html字体太大，一般定义为10

例如：我们用iPhone6为基准设计的，那就是375/10=37.5

之后就用我们测量的宽/37.5来定义

如果为了好计算，一般640/16=40为基准，好计算一点

今天就到这里了，see you