現在HTML5前端不僅僅侷限於PC端，HTML5前端還可以實現移動端，實現微信等等，傳統的佈局單位px，不能是達到自適應的學校過，那麼移動端佈局有哪些方式呢?

媒體查詢 + rem單位佈局

說道這個佈局，，那麼我們首先得了解什麼是媒體查詢，rem是什麼？

媒體查詢：媒體查詢可以讓我們根據裝置顯示器的特性（如視口寬度、螢幕比例、裝置方向：橫向或縱向）為其設定CSS樣式，

媒體查詢由媒體型別和一個或多個檢測媒體特性的條件表示式組成。

@media all and （條件）{

     css的語法

}

這句程式碼會自動的獲取到裝置的視口寬度，來匹配條件

@media all and （min-width：500px）{

     body{

         background:red;

     }

}

@media all and （min-width：700px）{

     body{

         background:green;

     }

}

@media all and （min-width：900px）{

     body{

         background:black;

     }

}

上面的程式碼表示：

（1）如果視口的最小寬度是500px的時候,則body的背景顏色為red，

（2）如果視口的最小寬度為700px的時候，則body的背景顏色為green，

（3）如果視口的最小寬度為900px的時候，則body的背景顏色為black，

這就是根據媒體查詢去獲取視口的寬度，來相應的的改變樣式，這就是媒體查詢，

那麼rem是什麼呢？

rem(font size of the root element)是指相對於根元素 (html)的字型大小的單位。

如果一個頁面中html{font-size:16px;},那麼1rem = 16px，2rem = 32px;

瞭解到這兩個概念之後，那麼他們是怎麼配合佈局移動端呢？接下來看下面的程式碼。

@media all and （min-width：320px）{

     html{

         font-size:12px;

     }

}

@media all and （min-width：375px）{

     body{

         font-size:14px;

     }

}

@media all and （min-width：414px）{

     body{

           font-size:16px;

     }

}

div{

   width:10rem;

   height:10rem; }

就以我們最常見的幾個手機型號為例，上述程式碼的表達的是，

（1）當頁面處於視口為320px的裝置下，html根節點的字型大小為12px，那麼div 的寬高為120px*120px;

（2）當頁面處於視口為375px的裝置下，html根節點的字型大小為14px，那麼div的寬高為140px*140px;

（3）當頁面處於視口為414px的裝置下，html根節點的字型大小為16px，那麼div的寬高為160px*160px;

那麼為什麼要這樣使用呢？

在移動端，如果的你設定一個div的寬高都固定為200px的情況下，在414px視口下面，一行你可以放下兩個div，那麼在小於400px以下的視口裝置中你都只能放下一個，這樣就會是得佈局錯亂，好比一個物體在一個超大空間中顯得很小，但是在小的空間存放不下，為使得頁面佈局不管在什麼裝置上都是正常，協調的情況，就會採用媒體查詢 + rem，來根據不同的裝置去相應的改變元素的大小。