資訊專欄INFORMATION COLUMN
摘要：今天在這里就略微談一下響應(yīng)式布局吧想必大家都知道響應(yīng)式布局已經(jīng)在這個移動端為主流的時代成為了避不開的話題之一接下來我們從小到大來談?wù)勴憫?yīng)式網(wǎng)頁設(shè)計的基本原則為什么為什么需要響應(yīng)式設(shè)計想必這點(diǎn)不說大家都能想到答案現(xiàn)在是一個移動為先的時代我們要
今天在這里就略微談一下響應(yīng)式布局吧,想必大家都知道響應(yīng)式布局已經(jīng)在這個移動端為主流的時代成為了避不開的話題之一,接下來我們從小到大來談?wù)勴憫?yīng)式網(wǎng)頁設(shè)計的基本原則.
為什么?為什么需要響應(yīng)式設(shè)計,想必這點(diǎn)不說大家都能想到答案.現(xiàn)在是一個移動為先的時代,我們要是將PC端的網(wǎng)頁照搬到移動端所行就會出現(xiàn)很多尷尬的情形,比如:
主要內(nèi)容無法第一時間呈現(xiàn)的用戶面前
用戶需要麻煩的縮放操作才能看到頁面的一小部分
手機(jī)點(diǎn)擊無法正確點(diǎn)擊到正確的按鈕
....
這些都會對我們的用戶移動體驗(yàn)造成不好的影響導(dǎo)致我們用戶的流失.所以響應(yīng)式網(wǎng)頁為了解決如上的問題就出現(xiàn)了.
是什么響應(yīng)式網(wǎng)頁設(shè)計(Resposive web design)也被稱為RWD,或者我們稱為自適應(yīng)網(wǎng)頁設(shè)計,是一種網(wǎng)頁設(shè)計的技術(shù)做法.
雖然我們前面說到的是移動端,但是概念上,RWD目的是使網(wǎng)站能在多種瀏覽設(shè)備上閱讀和導(dǎo)航,同時減少縮放,平移和滾動.
接下來我們開始學(xué)習(xí)下響應(yīng)式網(wǎng)頁設(shè)計中需要的知識吧.
這個是我們必須要知道的,就和下面這段html代碼一樣
什么是viewport?
viewport就是用戶網(wǎng)頁的可視區(qū)域,而viewport隨著設(shè)備的變化,在移動端上會小于PC端.
在平板電腦和移動電話出現(xiàn)之前,網(wǎng)頁值需要根據(jù)電腦屏幕設(shè)計即可,現(xiàn)在可就不同了,在移動端上PC端的設(shè)計會太大以至于無法適應(yīng)viewport,而通常為了解決這個問題,瀏覽器會自動的縮小了網(wǎng)頁并顯示在移動端上.
我們之前寫的那段標(biāo)簽又代表著什么呢?
一個標(biāo)簽代表著一份如何控制頁面大小與縮放的說明書.width=device-width這部分就和字面意思一樣將頁面寬度設(shè)置為設(shè)備寬度,而initial-sacle=1.0則是設(shè)置為初始縮放比例為1.0,如果不設(shè)置將會在切換橫屏?xí)r保持之前的頁面寬度.
我們需要理解一下像素和DIP(device independent pixel,設(shè)備獨(dú)立像素),假設(shè)我們有一臺2560px寬的設(shè)備,如果我們DIP為1280,則我們的pixel ratio為2.我們的瀏覽器并不是根據(jù)物理硬件的寬度而工作的,而是根據(jù)DIP寬度工作的,它將像素與實(shí)際距離關(guān)聯(lián)起來.
這部分我們就到此為止吧,稍作了解就好哦.
媒體查詢(Media Query)這也是我們談到響應(yīng)式不得不談的一部分,媒體查詢是什么呢,正如我們下面所寫的代碼這樣就是所謂的媒體查詢了.
media screen and (min-width:500px) and (max-width:600px)
這里給個MDN的傳送門
媒體查詢包含一個媒體類型和至少一個類似(max-width: 500px)限制范圍表達(dá)式.在mdn上詳細(xì)的介紹,在響應(yīng)式布局中我們只要記住screen and ()[and ()]這種形式就可以了.
斷點(diǎn)(Breakpoints)在媒體查詢中我們設(shè)置了不同的樣式,通過不同的寬度變化來更改應(yīng)用的樣式,而這個樣式變化的條件(臨界點(diǎn))就是我們這里所談的斷點(diǎn)了,斷點(diǎn)的設(shè)置對于我們響應(yīng)式設(shè)計是十分重要的,在這里我根據(jù)網(wǎng)上的資料總結(jié)一下斷點(diǎn)如何設(shè)置.
首先,我們設(shè)計響應(yīng)式網(wǎng)頁要移動為先,意思就是我們要先設(shè)計移動端上的網(wǎng)頁,然后再在寬度逐漸增長的情況下慢慢尋找自己心中的斷點(diǎn),并進(jìn)一步設(shè)計寬度更大情況下的網(wǎng)頁布局,從mobile->tablet->PC,逐步設(shè)計,也是所謂的漸進(jìn)增強(qiáng).
grid,我們最常見的一種響應(yīng)式設(shè)計的模式,它將頁面分割為一個個動態(tài)網(wǎng)格,并且在寬度變小的情況下會順延到下一格,我們常見的使用了grid的范例如bootstrap等都十分的簡單易用.
而flex box正是目前最熱門的,并且被各瀏覽器強(qiáng)烈推薦的一種模式,但是在使用前首先我們要確保我們做好了各個瀏覽器的兼容,包含了所有版本的瀏覽器引擎前綴.關(guān)于flex box,可以看看我這篇博文.
大體流動模型(mostlyfluid)
掉落列模型(column drop)
活動布局模型(layout shifter)
畫布移除模型(off canvas)
掉落列模型(column drop)最小視窗模式時,我們?nèi)齻€內(nèi)容塊每一個都占據(jù)一行,并且隨著寬度的增加,到達(dá)斷點(diǎn)時,則前兩個內(nèi)容塊一起占據(jù)一行,再根據(jù)寬度增加,到達(dá)斷點(diǎn)時,則三個內(nèi)容塊一起占據(jù)一行并且開始隨著寬度的增加而不再延伸,從而變?yōu)樵黾油膺吘?
大體流動模型(mostly fluid)這與掉落列模型相似,但是更像grid.
最小視窗模式時,我們內(nèi)容塊每個都與掉落列模型(column drop)一樣每一個都占據(jù)一行,隨著寬度的增加,列出現(xiàn)并把二三塊一起占據(jù)一行,然后隨著寬度的增加我們可以展示多個列,并在最后斷點(diǎn)時,寬度固定并且隨著寬度增加而增加外邊距.
可以說是最靈活的布局模型,我們不是單純的更改重排到其他列下方,而是可以更改模塊的順序.也就是使用order屬性.
畫布溢出模型(off canvas)簡單來說就是將不常用的導(dǎo)航或菜單放在畫布之外,如導(dǎo)航欄變?yōu)榘存I.
實(shí)例Column Drop
http://codepen.io/thewindswor...
Mostly Fluid
http://codepen.io/thewindswor...
Layout Shifter
http://codepen.io/thewindswor...
Off Canvas
http://codepen.io/thewindswor...
以上我們已經(jīng)將響應(yīng)式入門的東西都談過一遍了,大體上都能根據(jù)以上模式自己進(jìn)行一些小示例的開發(fā)了,立刻動手吧.
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/111691.html
摘要：關(guān)于文字個人感覺使用單位結(jié)合媒體查詢最好做移動端頁面。這些話是勉勵自己，也送給還未走出象牙塔的學(xué)弟學(xué)妹，和剛進(jìn)入社會工作還在迷茫的同胞們。關(guān)于彈性布局： display:flex;很好用，將元素放在一排，盒子可用寬度百分比，可替代浮動，雖然浮動也能做到，但是還要清除浮動，多此一舉，還可以實(shí)現(xiàn)居中等布局效果，但有兼容性問題，特別是justify-content:space-between，...
摘要：持續(xù)心累的找工作階段算是結(jié)束了，不同公司對面試的知識側(cè)重點(diǎn)不同，整體的感受就是大公司可能更偏向一些基礎(chǔ)或者原理布局一些經(jīng)典算法方面。現(xiàn)將我在面試過程遇到的問題總結(jié)下。目前先傳題目答案整理好之后再發(fā)布出來。 持續(xù)心累的找工作階段算是結(jié)束了，不同公司對面試的知識側(cè)重點(diǎn)不同，整體的感受就是：大公司可能更偏向一些JS基礎(chǔ)或者原理、html布局、一些經(jīng)典算法方面。小公司的面試更加側(cè)重對經(jīng)驗(yàn)和細(xì)節(jié)...
摘要：持續(xù)心累的找工作階段算是結(jié)束了，不同公司對面試的知識側(cè)重點(diǎn)不同，整體的感受就是大公司可能更偏向一些基礎(chǔ)或者原理布局一些經(jīng)典算法方面?，F(xiàn)將我在面試過程遇到的問題總結(jié)下。目前先傳題目答案整理好之后再發(fā)布出來。 持續(xù)心累的找工作階段算是結(jié)束了，不同公司對面試的知識側(cè)重點(diǎn)不同，整體的感受就是：大公司可能更偏向一些JS基礎(chǔ)或者原理、html布局、一些經(jīng)典算法方面。小公司的面試更加側(cè)重對經(jīng)驗(yàn)和細(xì)節(jié)...
摘要：持續(xù)心累的找工作階段算是結(jié)束了，不同公司對面試的知識側(cè)重點(diǎn)不同，整體的感受就是大公司可能更偏向一些基礎(chǔ)或者原理布局一些經(jīng)典算法方面。現(xiàn)將我在面試過程遇到的問題總結(jié)下。目前先傳題目答案整理好之后再發(fā)布出來。 持續(xù)心累的找工作階段算是結(jié)束了，不同公司對面試的知識側(cè)重點(diǎn)不同，整體的感受就是：大公司可能更偏向一些JS基礎(chǔ)或者原理、html布局、一些經(jīng)典算法方面。小公司的面試更加側(cè)重對經(jīng)驗(yàn)和細(xì)節(jié)...
閱讀 2522·2023-04-26 02:18
閱讀 1289·2021-10-14 09:43
閱讀 3863·2021-09-26 10:00
閱讀 7099·2021-09-22 15:28
閱讀 2570·2019-08-30 15:54
閱讀 2627·2019-08-30 15:52
閱讀 502·2019-08-29 11:30
閱讀 3492·2019-08-29 11:05
