一、流體布局
所謂的流體布局,就是用百分比來定義寬度,最外層容器的寬度設(shè)置為100%,就可以適配不同的屏幕,子元素按照比例來設(shè)置百分比,子元素整體的百分比之和就是100%,但是如果有子元素設(shè)置了邊框,或者padding,那么整體的寬度就會(huì)大于100%,這時(shí),我們可以將盒子的尺寸計(jì)算方式設(shè)置為從邊框計(jì)算,通過設(shè)置:box-sizing:border-box,此時(shí),盒子設(shè)置的寬度就是盒子的實(shí)際寬度,就沒有這個(gè)問題了。
寬度解決了,高度如何設(shè)置呢?一般的元素,高度可以固定不變,所以在屏幕變化時(shí),我們可以看到元素的寬度變了,高度不變,但是對(duì)于圖片,如果高度不同,圖片就會(huì)被拉扁,此時(shí)我們可以將圖片的寬度設(shè)為100%;它的寬度就由它的父級(jí)的寬度決定,圖片的高度不設(shè)置,圖片就會(huì)按照寬度變化等比例放大或縮小,這是圖片的特性,這樣就可以做到圖片的適配了。
流體布局的偽代碼如下:
二、響應(yīng)式布局
響應(yīng)式布局,就是使用媒體查詢的方式,針對(duì)不同的屏幕,對(duì)應(yīng)不同的樣式,但是移動(dòng)端的屏幕很多種,如果要對(duì)應(yīng)這么多套不同的樣式,這樣做也不現(xiàn)實(shí),所以針對(duì)移動(dòng)端,可以劃分出三個(gè)屏幕寬度范圍,在范圍之內(nèi)的,就使用同一套樣式,這樣定義三套樣式就可以了,寬度的區(qū)間可以參照蘋果手機(jī)的分辨率:374px以下為第一個(gè)區(qū)間,375px到413px為第二個(gè)區(qū)間,414px以上為第三個(gè)區(qū)間,按照這個(gè)三個(gè)區(qū)間定義三套樣式,在蘋果手機(jī)上可以做到很好的適配,但對(duì)于一些其他分辨率的手機(jī),可能會(huì)有一些不太適配的細(xì)節(jié),但是這三套,應(yīng)該基本上是適用了。
響應(yīng)式布局的偽代碼如下:
三、彈性盒子布局模型
彈性盒子布局模型是一個(gè)新增的CSS 布局模塊,它帶有流體布局和響應(yīng)式布局的一些特性,而且它用少量的屬性可以實(shí)現(xiàn)了多個(gè)元素的對(duì)齊方式,分布以及順序等問題,用它能快捷高效的實(shí)現(xiàn)適配多終端的布局,這種模塊簡稱為 flexbox,flexbox布局模塊的先后有三個(gè)版本,前兩個(gè)版本的一些屬性在最新的瀏覽器上已經(jīng)得不到支持了,第三個(gè)版本在最新的瀏覽器上已得到廣泛的支持。
Flexbox布局模塊是CSS3新增的一些屬性,這些屬性分為容器屬性和條目屬性,容器和條目是這種模塊里面的概念,指的其實(shí)就是父元素和子元素。父元素通過設(shè)置display:flex來聲明flexbox模塊、通過flex-flow來設(shè)置子元素排列方式、通過justify-content來設(shè)置元素的分布方式等等。而子元素通過flex屬性來設(shè)置伸長或縮小比例、通過order來設(shè)置它在容器中的順序等等。
四、基于rem的布局
rem是CSS3新增的一個(gè)單位,相對(duì)于em單位,rem的單位設(shè)置更加簡單,它是相對(duì)于<html>根元素的的字體大小,其他的元素如果用rem來設(shè)置單位,它們對(duì)應(yīng)的基準(zhǔn)就是一樣的,這樣,在移動(dòng)端適配中,除了html元素,其他元素的寬、高、行高、背景定位等等都用rem來設(shè)置,我們?cè)O(shè)定一個(gè)寬度作為基準(zhǔn),比如320px,然后按照這個(gè)基準(zhǔn),按比例來調(diào)節(jié)不同屏幕上對(duì)應(yīng)的html元素的字體大小,就可以同步改變其他所有元素的用rem設(shè)置的尺寸的大小,這樣就可以做到真正的按比例適配,不像流體布局,只能改變寬度,這種方式直接,高效,目前廣泛應(yīng)用在移動(dòng)端布局中。
動(dòng)態(tài)改變html標(biāo)簽文字大小的JavaScript如下:
CSS樣式設(shè)置偽代碼如下:
以上就是四種移動(dòng)端適配的方式,您可以根據(jù)項(xiàng)目的需要,選擇適合的適配方式,或者是組合使用一兩種方式在項(xiàng)目中,希望這篇文章對(duì)您在移動(dòng)端布局中有所幫助。
本文版權(quán)歸傳智播客Python培訓(xùn)學(xué)院所有,歡迎轉(zhuǎn)載,轉(zhuǎn)載請(qǐng)注明作者出處。謝謝!
作者:傳智播客Python培訓(xùn)學(xué)院