固定寬度布局：為網頁設定乙個固定的寬度，通常以 px 做為長度單位，常見於 pc 端網頁。
流式布局：為網頁設定乙個相對的寬度，通常以百分比做為長度單位。
柵格化布局：將網頁寬度人為的劃分成均等的長度，然後排版布局時則以這些均等的長度做為度量單位，通常利用百分比做為長度單位來劃分成均等的長度。
響應式布局：通過檢測裝置資訊，決定網頁布局方式，即使用者如果採用不同的裝置訪問同乙個網頁，有可能會看到不一樣的內容，一般情況下是檢測裝置螢幕的寬度來實現。
響應式布局
/* 大螢幕 */
@media (min-width:1200px)
.pro
}/* 平板和小螢幕電腦 */
@media (min-width:768px) and (max-width:979px)
.iponepro
.pro
}/* 橫向放置手機和豎向放置的平板 */
@media (min-width:767px)
/* 更小的裝置 */
@media (min-width:480px)
移動端布局
預設以寬度為640px的設計稿為基準頁面，然後通過js獲取當前顯示裝置的尺寸，對應的調整 html 標籤的font size大小，從而實現通過以rem為單位的移動端布局適配。function win,doc function layoutcalc html.style.fontsize rem px...
移動端布局
css畫素與裝置畫素 二者的區別在於前者是抽象的，用於瀏覽器渲染頁面，而後者是裝置的最小物理單位。可參考 a pixel is not a pixel is not a pixel 進行理解。視口 移動端瀏覽器有兩個視口，即可見視口與布局視口，二者的區別在於前者為基於移動裝置螢幕的實際寬度，而後者為...
移動端布局
瀏覽器上 用來顯示網頁的那部分區域了 1 設定 view 有 init scale 頁面的初始縮放值 為數字 width viewport的寬度 height viewport的高度 mininum scale 允許使用者縮放最小值 maxinum scale 允許使用者縮放最大值 user sca...