要知道不管是任何一種語(yǔ)言來(lái)開(kāi)發(fā)，在做移動(dòng)端和PC端的時(shí)候頁(yè)面的局部都是不一樣的，都是要找到適合的頁(yè)面布局才不會(huì)出現(xiàn)有不適配手機(jī)屏幕的問(wèn)題。用python來(lái)開(kāi)發(fā)的話肯定也是一樣有著問(wèn)題的，下面達(dá)內(nèi)科技就來(lái)給大家講解下適合python移動(dòng)端的頁(yè)面布局有哪些?
一、流體布局
所謂的流體布局，就是用百分比來(lái)定義寬度，外層容器的寬度設(shè)置為，就可以適配不同的屏幕，子元素按照比例來(lái)設(shè)置百分比，子元素整體的百分比之和就是，但是如果有子元素設(shè)置了邊框，或者padding，那么整體的寬度就會(huì)大于，這時(shí)，我們可以將盒子的尺寸計(jì)算方式設(shè)置為從邊框計(jì)算，通過(guò)設(shè)置：box-sizing:border-box，此時(shí)，盒子設(shè)置的寬度就是盒子的實(shí)際寬度，就沒(méi)有這個(gè)問(wèn)題了。
寬度解決了，高度如何設(shè)置呢?一般的元素，高度可以固定不變，所以在屏幕變化時(shí)，我們可以看到元素的寬度變了，高度不變，但是對(duì)于圖片，如果高度不同，圖片就會(huì)被拉扁，此時(shí)我們可以將圖片的寬度設(shè)為;它的寬度就由它的父級(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ū)間可以參照蘋(píng)果手機(jī)的分辨率：374px以下為個(gè)區(qū)間，375px到413px為第二個(gè)區(qū)間，414px以上為第三個(gè)區(qū)間，按照這個(gè)三個(gè)區(qū)間定義三套樣式，在蘋(píng)果手機(jī)上可以做到很好的適配，但對(duì)于一些其他分辨率的手機(jī)，可能會(huì)有一些不太適配的細(xì)節(jié)，但是這三套，應(yīng)該基本上是適用了。
三、彈性盒子布局模型
彈性盒子布局模型是一個(gè)新增的CSS
布局模塊，它帶有流體布局和響應(yīng)式布局的一些特性，而且它用少量的屬性可以實(shí)現(xiàn)了多個(gè)元素的對(duì)齊方式，分布以及順序等問(wèn)題，用它能快捷高效的實(shí)現(xiàn)適配多終端的布局，這種模塊簡(jiǎn)稱為
flexbox，flexbox布局模塊的先后有三個(gè)版本，前兩個(gè)版本的一些屬性在的瀏覽器上已經(jīng)得不到支持了，第三個(gè)版本在的瀏覽器上已得到廣泛的支持。
Flexbox布局模塊是CSS3新增的一些屬性，這些屬性分為容器屬性和條目屬性，容器和條目是這種模塊里面的概念，指的其實(shí)就是父元素和子元素。父元素通過(guò)設(shè)置display:flex來(lái)聲明flexbox模塊、通過(guò)flex-flow來(lái)設(shè)置子元素排列方式、通過(guò)justify-content來(lái)設(shè)置元素的分布方式等等。而子元素通過(guò)flex屬性來(lái)設(shè)置伸長(zhǎng)或縮小比例、通過(guò)order來(lái)設(shè)置它在容器中的順序等等。
四、基于rem的布局
rem是CSS3新增的一個(gè)單位，相對(duì)于em單位，rem的單位設(shè)置更加簡(jiǎn)單，它是相對(duì)于根元素的的字體大小，其他的元素如果用rem來(lái)設(shè)置單位，它們對(duì)應(yīng)的基準(zhǔn)就是一樣的，這樣，在移動(dòng)端適配中，除了html元素，其他元素的寬、高、行高、背景定位等等都用rem來(lái)設(shè)置，我們?cè)O(shè)定一個(gè)寬度作為基準(zhǔn)，比如320px，然后按照這個(gè)基準(zhǔn)，按比例來(lái)調(diào)節(jié)不同屏幕上對(duì)應(yīng)的html元素的字體大小，就可以同步改變其他所有元素的用rem設(shè)置的尺寸的大小，這樣就可以做到真正的按比例適配，不像流體布局，只能改變寬度，這種方式直接，高效，目前廣泛應(yīng)用在移動(dòng)端布局中。
以上這四種頁(yè)面布局就是適合python移動(dòng)斷的了，達(dá)內(nèi)科技是一家專業(yè)的python培訓(xùn)機(jī)構(gòu)，如果說(shuō)你想要學(xué)習(xí)python的話那么達(dá)內(nèi)科技?xì)g迎大家來(lái)我們公司的python培訓(xùn)班進(jìn)行實(shí)地考察，也可以點(diǎn)擊我們文章下面的獲取試聽(tīng)資格按鈕來(lái)獲取我們的python課程免費(fèi)試聽(tīng)資格，在試聽(tīng)中可以更加深入的了解達(dá)內(nèi)科技。
