国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

談談響應式布局

smallStone / 473人閱讀

摘要：今天在這里就略微談一下響應式布局吧想必大家都知道響應式布局已經在這個移動端為主流的時代成為了避不開的話題之一接下來我們從小到大來談談響應式網頁設計的基本原則為什么為什么需要響應式設計想必這點不說大家都能想到答案現在是一個移動為先的時代我們要

今天在這里就略微談一下響應式布局吧,想必大家都知道響應式布局已經在這個移動端為主流的時代成為了避不開的話題之一,接下來我們從小到大來談談響應式網頁設計的基本原則.

為什么?

為什么需要響應式設計,想必這點不說大家都能想到答案.現在是一個移動為先的時代,我們要是將PC端的網頁照搬到移動端所行就會出現很多尷尬的情形,比如:

主要內容無法第一時間呈現的用戶面前

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

手機點擊無法正確點擊到正確的按鈕

....

這些都會對我們的用戶移動體驗造成不好的影響導致我們用戶的流失.所以響應式網頁為了解決如上的問題就出現了.

是什么

響應式網頁設計(Resposive web design)也被稱為RWD,或者我們稱為自適應網頁設計,是一種網頁設計的技術做法.
雖然我們前面說到的是移動端,但是概念上,RWD目的是使網站能在多種瀏覽設備上閱讀和導航,同時減少縮放,平移和滾動.
接下來我們開始學習下響應式網頁設計中需要的知識吧.

viewport

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

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

像素與DIP與pixel ratio

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

媒體查詢(Media Query)

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

媒體查詢的使用方式

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

斷點(Breakpoints)

在媒體查詢中我們設置了不同的樣式,通過不同的寬度變化來更改應用的樣式,而這個樣式變化的條件(臨界點)就是我們這里所談的斷點了,斷點的設置對于我們響應式設計是十分重要的,在這里我根據網上的資料總結一下斷點如何設置.
首先,我們設計響應式網頁要移動為先,意思就是我們要先設計移動端上的網頁,然后再在寬度逐漸增長的情況下慢慢尋找自己心中的斷點,并進一步設計寬度更大情況下的網頁布局,從mobile->tablet->PC,逐步設計,也是所謂的漸進增強.

柵格設計(grid)和彈性盒(Flex box)

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

怎么做?常見的模式

大體流動模型(mostlyfluid)

掉落列模型(column drop)

活動布局模型(layout shifter)

畫布移除模型(off canvas)

掉落列模型(column drop)

最小視窗模式時,我們三個內容塊每一個都占據一行,并且隨著寬度的增加,到達斷點時,則前兩個內容塊一起占據一行,再根據寬度增加,到達斷點時,則三個內容塊一起占據一行并且開始隨著寬度的增加而不再延伸,從而變為增加外邊距.

大體流動模型(mostly fluid)

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

活動布局模型(Layout Shifter)

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

畫布溢出模型(off canvas)

簡單來說就是將不常用的導航或菜單放在畫布之外,如導航欄變為按鍵.

實例

Column Drop
http://codepen.io/thewindswor...

Mostly Fluid
http://codepen.io/thewindswor...

Layout Shifter
http://codepen.io/thewindswor...

Off Canvas
http://codepen.io/thewindswor...

小結

以上我們已經將響應式入門的東西都談過一遍了,大體上都能根據以上模式自己進行一些小示例的開發了,立刻動手吧.

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111691.html

相關文章

  • 實習一周，做了公司官網，談談關于大學生找實習工作以及記錄前端響應式布局開發心得

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

    BicycleWarrior 評論0 收藏0

  • 2017年五月前端面試題目的總結

    摘要：持續心累的找工作階段算是結束了，不同公司對面試的知識側重點不同，整體的感受就是大公司可能更偏向一些基礎或者原理布局一些經典算法方面。現將我在面試過程遇到的問題總結下。目前先傳題目答案整理好之后再發布出來。 持續心累的找工作階段算是結束了，不同公司對面試的知識側重點不同，整體的感受就是：大公司可能更偏向一些JS基礎或者原理、html布局、一些經典算法方面。小公司的面試更加側重對經驗和細節...

    warkiz 評論0 收藏0

  • 2017年五月前端面試題目的總結

    摘要：持續心累的找工作階段算是結束了，不同公司對面試的知識側重點不同，整體的感受就是大公司可能更偏向一些基礎或者原理布局一些經典算法方面。現將我在面試過程遇到的問題總結下。目前先傳題目答案整理好之后再發布出來。 持續心累的找工作階段算是結束了，不同公司對面試的知識側重點不同，整體的感受就是：大公司可能更偏向一些JS基礎或者原理、html布局、一些經典算法方面。小公司的面試更加側重對經驗和細節...

    dreamGong 評論0 收藏0

  • 2017年五月前端面試題目的總結

    摘要：持續心累的找工作階段算是結束了，不同公司對面試的知識側重點不同，整體的感受就是大公司可能更偏向一些基礎或者原理布局一些經典算法方面。現將我在面試過程遇到的問題總結下。目前先傳題目答案整理好之后再發布出來。 持續心累的找工作階段算是結束了，不同公司對面試的知識側重點不同，整體的感受就是：大公司可能更偏向一些JS基礎或者原理、html布局、一些經典算法方面。小公司的面試更加側重對經驗和細節...

    liangzai_cool 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<