亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

談?wù)勴憫?yīng)式布局

smallStone / 549人閱讀

摘要：今天在這里就略微談一下響應(yīng)式布局吧想必大家都知道響應(yīng)式布局已經(jīng)在這個(gè)移動(dòng)端為主流的時(shí)代成為了避不開的話題之一接下來(lái)我們從小到大來(lái)談?wù)勴憫?yīng)式網(wǎng)頁(yè)設(shè)計(jì)的基本原則為什么為什么需要響應(yīng)式設(shè)計(jì)想必這點(diǎn)不說(shuō)大家都能想到答案現(xiàn)在是一個(gè)移動(dòng)為先的時(shí)代我們要

今天在這里就略微談一下響應(yīng)式布局吧,想必大家都知道響應(yīng)式布局已經(jīng)在這個(gè)移動(dòng)端為主流的時(shí)代成為了避不開的話題之一,接下來(lái)我們從小到大來(lái)談?wù)勴憫?yīng)式網(wǎng)頁(yè)設(shè)計(jì)的基本原則.

為什么?

為什么需要響應(yīng)式設(shè)計(jì),想必這點(diǎn)不說(shuō)大家都能想到答案.現(xiàn)在是一個(gè)移動(dòng)為先的時(shí)代,我們要是將PC端的網(wǎng)頁(yè)照搬到移動(dòng)端所行就會(huì)出現(xiàn)很多尷尬的情形,比如:

主要內(nèi)容無(wú)法第一時(shí)間呈現(xiàn)的用戶面前

用戶需要麻煩的縮放操作才能看到頁(yè)面的一小部分

手機(jī)點(diǎn)擊無(wú)法正確點(diǎn)擊到正確的按鈕

....

這些都會(huì)對(duì)我們的用戶移動(dòng)體驗(yàn)造成不好的影響導(dǎo)致我們用戶的流失.所以響應(yīng)式網(wǎng)頁(yè)為了解決如上的問(wèn)題就出現(xiàn)了.

是什么

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)(Resposive web design)也被稱為RWD,或者我們稱為自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì),是一種網(wǎng)頁(yè)設(shè)計(jì)的技術(shù)做法.
雖然我們前面說(shuō)到的是移動(dòng)端,但是概念上,RWD目的是使網(wǎng)站能在多種瀏覽設(shè)備上閱讀和導(dǎo)航,同時(shí)減少縮放,平移和滾動(dòng).
接下來(lái)我們開始學(xué)習(xí)下響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)中需要的知識(shí)吧.

viewport

這個(gè)是我們必須要知道的,就和下面這段html代碼一樣

什么是viewport?
viewport就是用戶網(wǎng)頁(yè)的可視區(qū)域,而viewport隨著設(shè)備的變化,在移動(dòng)端上會(huì)小于PC端.
在平板電腦和移動(dòng)電話出現(xiàn)之前,網(wǎng)頁(yè)值需要根據(jù)電腦屏幕設(shè)計(jì)即可,現(xiàn)在可就不同了,在移動(dòng)端上PC端的設(shè)計(jì)會(huì)太大以至于無(wú)法適應(yīng)viewport,而通常為了解決這個(gè)問(wèn)題,瀏覽器會(huì)自動(dòng)的縮小了網(wǎng)頁(yè)并顯示在移動(dòng)端上.
我們之前寫的那段標(biāo)簽又代表著什么呢?
一個(gè)標(biāo)簽代表著一份如何控制頁(yè)面大小與縮放的說(shuō)明書.width=device-width這部分就和字面意思一樣將頁(yè)面寬度設(shè)置為設(shè)備寬度,而initial-sacle=1.0則是設(shè)置為初始縮放比例為1.0,如果不設(shè)置將會(huì)在切換橫屏?xí)r保持之前的頁(yè)面寬度.

像素與DIP與pixel ratio

我們需要理解一下像素和DIP(device independent pixel,設(shè)備獨(dú)立像素),假設(shè)我們有一臺(tái)2560px寬的設(shè)備,如果我們DIP為1280,則我們的pixel ratio為2.我們的瀏覽器并不是根據(jù)物理硬件的寬度而工作的,而是根據(jù)DIP寬度工作的,它將像素與實(shí)際距離關(guān)聯(lián)起來(lái).
這部分我們就到此為止吧,稍作了解就好哦.

媒體查詢(Media Query)

媒體查詢(Media Query)這也是我們談到響應(yīng)式不得不談的一部分,媒體查詢是什么呢,正如我們下面所寫的代碼這樣就是所謂的媒體查詢了.
media screen and (min-width:500px) and (max-width:600px)
這里給個(gè)MDN的傳送門

媒體查詢的使用方式

媒體查詢包含一個(gè)媒體類型和至少一個(gè)類似(max-width: 500px)限制范圍表達(dá)式.在mdn上詳細(xì)的介紹,在響應(yīng)式布局中我們只要記住screen and ()[and ()]這種形式就可以了.

斷點(diǎn)(Breakpoints)

在媒體查詢中我們?cè)O(shè)置了不同的樣式,通過(guò)不同的寬度變化來(lái)更改應(yīng)用的樣式,而這個(gè)樣式變化的條件(臨界點(diǎn))就是我們這里所談的斷點(diǎn)了,斷點(diǎn)的設(shè)置對(duì)于我們響應(yīng)式設(shè)計(jì)是十分重要的,在這里我根據(jù)網(wǎng)上的資料總結(jié)一下斷點(diǎn)如何設(shè)置.
首先,我們?cè)O(shè)計(jì)響應(yīng)式網(wǎng)頁(yè)要移動(dòng)為先,意思就是我們要先設(shè)計(jì)移動(dòng)端上的網(wǎng)頁(yè),然后再在寬度逐漸增長(zhǎng)的情況下慢慢尋找自己心中的斷點(diǎn),并進(jìn)一步設(shè)計(jì)寬度更大情況下的網(wǎng)頁(yè)布局,從mobile->tablet->PC,逐步設(shè)計(jì),也是所謂的漸進(jìn)增強(qiáng).

柵格設(shè)計(jì)(grid)和彈性盒(Flex box)

grid,我們最常見的一種響應(yīng)式設(shè)計(jì)的模式,它將頁(yè)面分割為一個(gè)個(gè)動(dòng)態(tài)網(wǎng)格,并且在寬度變小的情況下會(huì)順延到下一格,我們常見的使用了grid的范例如bootstrap等都十分的簡(jiǎn)單易用.
而flex box正是目前最熱門的,并且被各瀏覽器強(qiáng)烈推薦的一種模式,但是在使用前首先我們要確保我們做好了各個(gè)瀏覽器的兼容,包含了所有版本的瀏覽器引擎前綴.關(guān)于flex box,可以看看我這篇博文.

怎么做?常見的模式

大體流動(dòng)模型(mostlyfluid)

掉落列模型(column drop)

活動(dòng)布局模型(layout shifter)

畫布移除模型(off canvas)

掉落列模型(column drop)

最小視窗模式時(shí),我們?nèi)齻€(gè)內(nèi)容塊每一個(gè)都占據(jù)一行,并且隨著寬度的增加,到達(dá)斷點(diǎn)時(shí),則前兩個(gè)內(nèi)容塊一起占據(jù)一行,再根據(jù)寬度增加,到達(dá)斷點(diǎn)時(shí),則三個(gè)內(nèi)容塊一起占據(jù)一行并且開始隨著寬度的增加而不再延伸,從而變?yōu)樵黾油膺吘?

大體流動(dòng)模型(mostly fluid)

這與掉落列模型相似,但是更像grid.
最小視窗模式時(shí),我們內(nèi)容塊每個(gè)都與掉落列模型(column drop)一樣每一個(gè)都占據(jù)一行,隨著寬度的增加,列出現(xiàn)并把二三塊一起占據(jù)一行,然后隨著寬度的增加我們可以展示多個(gè)列,并在最后斷點(diǎn)時(shí),寬度固定并且隨著寬度增加而增加外邊距.

活動(dòng)布局模型(Layout Shifter)

可以說(shuō)是最靈活的布局模型,我們不是單純的更改重排到其他列下方,而是可以更改模塊的順序.也就是使用order屬性.

畫布溢出模型(off canvas)

簡(jiǎn)單來(lái)說(shuō)就是將不常用的導(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...

小結(jié)

以上我們已經(jīng)將響應(yīng)式入門的東西都談過(guò)一遍了,大體上都能根據(jù)以上模式自己進(jìn)行一些小示例的開發(fā)了,立刻動(dòng)手吧.

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/111691.html

相關(guān)文章

  • 實(shí)習(xí)一周，做了公司官網(wǎng)，談?wù)?/em>關(guān)于大學(xué)生找實(shí)習(xí)工作以及記錄前端響應(yīng)式布局開發(fā)心得

    摘要：關(guān)于文字個(gè)人感覺(jué)使用單位結(jié)合媒體查詢最好做移動(dòng)端頁(yè)面。這些話是勉勵(lì)自己，也送給還未走出象牙塔的學(xué)弟學(xué)妹，和剛進(jìn)入社會(huì)工作還在迷茫的同胞們。關(guān)于彈性布局： 　　display:flex;很好用，將元素放在一排，盒子可用寬度百分比，可替代浮動(dòng)，雖然浮動(dòng)也能做到，但是還要清除浮動(dòng)，多此一舉，還可以實(shí)現(xiàn)居中等布局效果，但有兼容性問(wèn)題，特別是justify-content:space-between，...

    BicycleWarrior 評(píng)論0 收藏0

  • 2017年五月前端面試題目的總結(jié)

    摘要：持續(xù)心累的找工作階段算是結(jié)束了，不同公司對(duì)面試的知識(shí)側(cè)重點(diǎn)不同，整體的感受就是大公司可能更偏向一些基礎(chǔ)或者原理布局一些經(jīng)典算法方面?，F(xiàn)將我在面試過(guò)程遇到的問(wèn)題總結(jié)下。目前先傳題目答案整理好之后再發(fā)布出來(lái)。 持續(xù)心累的找工作階段算是結(jié)束了，不同公司對(duì)面試的知識(shí)側(cè)重點(diǎn)不同，整體的感受就是：大公司可能更偏向一些JS基礎(chǔ)或者原理、html布局、一些經(jīng)典算法方面。小公司的面試更加側(cè)重對(duì)經(jīng)驗(yàn)和細(xì)節(jié)...

    warkiz 評(píng)論0 收藏0

  • 2017年五月前端面試題目的總結(jié)

    摘要：持續(xù)心累的找工作階段算是結(jié)束了，不同公司對(duì)面試的知識(shí)側(cè)重點(diǎn)不同，整體的感受就是大公司可能更偏向一些基礎(chǔ)或者原理布局一些經(jīng)典算法方面?，F(xiàn)將我在面試過(guò)程遇到的問(wèn)題總結(jié)下。目前先傳題目答案整理好之后再發(fā)布出來(lái)。 持續(xù)心累的找工作階段算是結(jié)束了，不同公司對(duì)面試的知識(shí)側(cè)重點(diǎn)不同，整體的感受就是：大公司可能更偏向一些JS基礎(chǔ)或者原理、html布局、一些經(jīng)典算法方面。小公司的面試更加側(cè)重對(duì)經(jīng)驗(yàn)和細(xì)節(jié)...

    dreamGong 評(píng)論0 收藏0

  • 2017年五月前端面試題目的總結(jié)

    摘要：持續(xù)心累的找工作階段算是結(jié)束了，不同公司對(duì)面試的知識(shí)側(cè)重點(diǎn)不同，整體的感受就是大公司可能更偏向一些基礎(chǔ)或者原理布局一些經(jīng)典算法方面。現(xiàn)將我在面試過(guò)程遇到的問(wèn)題總結(jié)下。目前先傳題目答案整理好之后再發(fā)布出來(lái)。 持續(xù)心累的找工作階段算是結(jié)束了，不同公司對(duì)面試的知識(shí)側(cè)重點(diǎn)不同，整體的感受就是：大公司可能更偏向一些JS基礎(chǔ)或者原理、html布局、一些經(jīng)典算法方面。小公司的面試更加側(cè)重對(duì)經(jīng)驗(yàn)和細(xì)節(jié)...

    liangzai_cool 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<