前端在制作移動端頁面時,會碰到適配各種手機屏幕的問題,而且還包括平板電腦,這么多種分辨率的屏幕,如何做到適配呢？粵嵌Python培訓為大家總結了四種適配方式：

　　一、流體布局

　　所謂的流體布局，就是用百分比來定義寬度，外層容器的寬度設置為，就可以適配不同的屏幕，子元素按照比例來設置百分比，子元素整體的百分比之和就是，但是如果有子元素設置了邊框，或者padding，那么整體的寬度就會大于，這時，我們可以將盒子的尺寸計算方式設置為從邊框計算，通過設置：box-sizing:border-box，此時，盒子設置的寬度就是盒子的實際寬度，就沒有這個問題了。

       寬度解決了，高度如何設置呢？一般的元素，高度可以固定不變，所以在屏幕變化時，我們可以看到元素的寬度變了，高度不變，但是對于圖片，如果高度不同，圖片就會被拉扁，此時我們可以將圖片的寬度設為；它的寬度就由它的父級的寬度決定，圖片的高度不設置，圖片就會按照寬度變化等比例放大或縮小，這是圖片的特性，這樣就可以做到圖片的適配了。

　　二、響應式布局

      響應式布局，就是使用媒體查詢的方式，針對不同的屏幕，對應不同的樣式，但是移動端的屏幕很多種，如果要對應這么多套不同的樣式，這樣做也不現(xiàn)實，所以針對移動端，Python開發(fā)培訓可以劃分出三個屏幕寬度范圍，在范圍之內的，就使用同一套樣式，這樣定義三套樣式就可以了。

　　三、彈性盒子布局模型

      彈性盒子布局模型是一個新增的CSS 布局模塊，它帶有流體布局和響應式布局的一些特性，而且它用少量的屬性可以實現(xiàn)了多個元素的對齊方式，分布以及順序等問題，用它能快捷高效的實現(xiàn)適配多終端的布局，這種模塊簡稱為 flexbox，flexbox布局模塊的先后有三個版本，前兩個版本的一些屬性在的瀏覽器上已經(jīng)得不到支持了，第三個版本在的瀏覽器上已得到廣泛的支持。

　　四、基于rem的布局

　　rem是CSS3新增的一個單位，相對于em單位，rem的單位設置更加簡單，它是相對于根元素的的字體大小，其他的元素如果用rem來設置單位，它們對應的基準就是一樣的，這樣，在移動端適配中，除了html元素，其他元素的寬、高、行高、背景定位等等都用rem來設置，我們設定一個寬度作為基準，比如320px，然后按照這個基準，按比例來調節(jié)不同屏幕上對應的html元素的字體大小，就可以同步改變其他所有元素的用rem設置的尺寸的大小，這樣就可以做到真正的按比例適配，不像流體布局，只能改變寬度，這種方式直接，高效，目前廣泛應用在移動端布局中。

　　以上就是移動端頁面四大適配方式，如想了解更有Python內容，歡迎到粵嵌教育進行Python培訓，有專業(yè)的老師指導，讓你在學習的過程中少走很多的彎路。