移動端佈局關鍵是要設定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