前端頁面佈局

前端頁面佈局

一、固定佈局
即頁面固定寬度，早期部分網站會把頁面設置成320的寬度，可以達到前端以及頁面視覺想要的效果。缺點是部分大屏幕手機會有兩邊留白，以及部分手機上的頁面特別小，按鈕等也特別小，影響用戶體驗。

二、流式佈局
即寬度使用百分比，高度使用固定值的頁面。優點是可以使所有屏幕都適配，但是顯示的效果很不好。頁面會被拉寬，只有幾款尺寸的手機可以完美顯示出ui設計師想要的效果。

三、使用viewpoint進行縮放

<meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no">

以320寬度爲基礎，進行縮放，最大縮放1.3倍，即爲320*1.3=416，簡單粗暴，不過有些頁面可能會糊。但是也很高效了。

四、rem佈局
rem佈局能等比例適配所有屏幕，rem通過根目錄進行適配。

html{
  font-size: 14px;
}

接下來的1rem即相當於14px，需要適配的時候修改html的font-size大小值即可。
不同分辨率下可以通過js去動態計算html（根目錄）下的font-size值，即所有屏幕分辨率都可適配。也可統計網站訪問有哪些需要適配的屏幕，即可媒體查詢。

html {
  font-size : 14px;
}
@media only screen and (min-width: 401px){
  html {
    font-size: 17.5px !important;
  }
}
@media only screen and (min-width: 428px){
  html {
    font-size: 18.7px !important;
  }
}
@media only screen and (min-width: 481px){
  html {
    font-size: 21px !important;
  }
}
@media only screen and (min-width: 569px){
  html {
    font-size: 24.9px !important;
  }
}
@media only screen and (min-width: 641px){
  html {
    font-size: 28px !important;
  }
}