日韩欧乱色一区二区三区在线_久久―日本道色综合久久_欧美日本一区二区_网曝91综合精品门事件在线

千鋒教育-做有情懷、有良心、有品質(zhì)的職業(yè)教育機(jī)構(gòu)

手機(jī)站
千鋒教育

千鋒學(xué)習(xí)站 | 隨時(shí)隨地免費(fèi)學(xué)

千鋒教育

掃一掃進(jìn)入千鋒手機(jī)站

領(lǐng)取全套視頻
千鋒教育

關(guān)注千鋒學(xué)習(xí)站小程序
隨時(shí)隨地免費(fèi)學(xué)習(xí)課程

當(dāng)前位置:首頁  >  技術(shù)干貨  > python移動端頁面適配的四大方式

python移動端頁面適配的四大方式

來源:千鋒教育
發(fā)布人:xqq
時(shí)間: 2023-11-05 18:29:01 1699180141

一、流體布局

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

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

二、響應(yīng)式布局

響應(yīng)式布局,就是使用媒體查詢的方式,針對不同的屏幕,對應(yīng)不同的樣式,但是移動端的屏幕很多種,如果要對應(yīng)這么多套不同的樣式,這樣做也不現(xiàn)實(shí),所以針對移動端,可以劃分出三個(gè)屏幕寬度范圍,在范圍之內(nèi)的,就使用同一套樣式,這樣定義三套樣式就可以了,寬度的區(qū)間可以參照蘋果手機(jī)的分辨率:374px以下為第一個(gè)區(qū)間,375px到413px為第二個(gè)區(qū)間,414px以上為第三個(gè)區(qū)間,按照這個(gè)三個(gè)區(qū)間定義三套樣式,在蘋果手機(jī)上可以做到很好的適配,但對于一些其他分辨率的手機(jī),可能會有一些不太適配的細(xì)節(jié),但是這三套,應(yīng)該基本上是適用了。

三、彈性盒子布局模型

彈性盒子布局模型是一個(gè)新增的CSS布局模塊,它帶有流體布局和響應(yīng)式布局的一些特性,而且它用少量的屬性可以實(shí)現(xiàn)了多個(gè)元素的對齊方式,分布以及順序等問題,用它能快捷高效的實(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è)單位,相對于em單位,rem的單位設(shè)置更加簡單,它是相對于根元素的的字體大小,其他的元素如果用rem來設(shè)置單位,它們對應(yīng)的基準(zhǔn)就是一樣的,這樣,在移動端適配中,除了html元素,其他元素的寬、高、行高、背景定位等等都用rem來設(shè)置,我們設(shè)定一個(gè)寬度作為基準(zhǔn),比如320px,然后按照這個(gè)基準(zhǔn),按比例來調(diào)節(jié)不同屏幕上對應(yīng)的html元素的字體大小,就可以同步改變其他所有元素的用rem設(shè)置的尺寸的大小,這樣就可以做到真正的按比例適配,不像流體布局,只能改變寬度,這種方式直接,高效,目前廣泛應(yīng)用在移動端布局中。

聲明:本站稿件版權(quán)均屬千鋒教育所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
10年以上業(yè)內(nèi)強(qiáng)師集結(jié),手把手帶你蛻變精英
請您保持通訊暢通,專屬學(xué)習(xí)老師24小時(shí)內(nèi)將與您1V1溝通
免費(fèi)領(lǐng)取
今日已有369人領(lǐng)取成功
劉同學(xué) 138****2860 剛剛成功領(lǐng)取
王同學(xué) 131****2015 剛剛成功領(lǐng)取
張同學(xué) 133****4652 剛剛成功領(lǐng)取
李同學(xué) 135****8607 剛剛成功領(lǐng)取
楊同學(xué) 132****5667 剛剛成功領(lǐng)取
岳同學(xué) 134****6652 剛剛成功領(lǐng)取
梁同學(xué) 157****2950 剛剛成功領(lǐng)取
劉同學(xué) 189****1015 剛剛成功領(lǐng)取
張同學(xué) 155****4678 剛剛成功領(lǐng)取
鄒同學(xué) 139****2907 剛剛成功領(lǐng)取
董同學(xué) 138****2867 剛剛成功領(lǐng)取
周同學(xué) 136****3602 剛剛成功領(lǐng)取
相關(guān)推薦HOT
Python在編程語言中的優(yōu)勢

毫不夸張地說,大數(shù)據(jù)已經(jīng)成為任何商業(yè)交流中不可或缺的一部分。桌面和移動搜索向全世界的營銷人員和公司以空前的規(guī)模提供著數(shù)據(jù),并且隨著物聯(lián)...詳情>>

2023-11-05 21:29:02
pythonpandas是干什么用的?

Python中pandas是什么?Pandas是基于numpy的一種工具,該工具是為了解決數(shù)據(jù)分析任務(wù)而創(chuàng)建的。Pandas納入了大量的庫和一些標(biāo)準(zhǔn)的數(shù)據(jù)模型,提供...詳情>>

2023-11-05 20:45:49
VB.NET和Python有什么區(qū)別?

我想大家都知道VB.NET和Python都是編程語言,都是面向?qū)ο蟮木幊陶Z言,那么VB.NET和Python有什么區(qū)別呢?請看下文。其實(shí)Python不用過多介紹,大...詳情>>

2023-11-05 20:24:13
Python自動化辦公有哪些值得使用的庫?

眾所周知,Python的使用場景非常廣泛,無論是生活還是工作,都可以使用Python來幫助我們。Python主要可以用在爬蟲、后端開發(fā)、人工智能、機(jī)器學(xué)...詳情>>

2023-11-05 20:06:13
Python爬蟲框架有哪些?

Python被稱為爬蟲首選語言的主要原因是Python擁有眾多的爬蟲框架,不僅功能齊全,優(yōu)勢眾多,還能幫助程序員用更少的代碼實(shí)現(xiàn)更多的功能,讓工作...詳情>>

2023-11-05 19:55:25
主站蜘蛛池模板: 积石山| 重庆市| 年辖:市辖区| 楚雄市| 绩溪县| 浮山县| 万安县| 凤山市| 杂多县| 绵阳市| 苏尼特右旗| 石泉县| 聂荣县| 保定市| 台前县| 保德县| 孟村| 甘肃省| 岳阳市| 璧山县| 乌拉特后旗| 曲阳县| 厦门市| 婺源县| 吴桥县| 陕西省| 新民市| 安吉县| 鲁山县| 湖南省| 彰武县| 东平县| 浪卡子县| 建德市| 余干县| 哈巴河县| 新干县| 左权县| 河西区| 东山县| 罗源县|