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