知識 分享 互助 懶人建站

    懶人建站專注于網頁素材下載,提供網站模板、網頁設計、ps素材、圖片素材等,服務于【個人站長】【網頁設計師】和【web開發從業者】的代碼素材與設計素材網站。

    懶人建站提供網頁素材下載、網站模板
    知識 分享 互助!

    html5/css3響應式布局介紹及設計流程

    作者:佳明媽 來源:jquery特效 2013-03-27 人氣:
    html5/css3響應式布局介紹及設計流程,利用css3的media query媒體查詢功能。移動終端一般都是對css3支持比較好的高級瀏覽器不需要考慮響應式布局的媒體查詢media query兼容問題

    html5/css3響應式布局介紹

    html5/css3響應式布局介紹及設計流程,利用css3的media query媒體查詢功能。移動終端一般都是對css3支持比較好的高級瀏覽器不需要考慮響應式布局的媒體查詢media query兼容問題

    一個普通的自適應顯示的三欄網頁,當你用不同的終端來查看這個頁面的時候,他會根據幾種終端來顯示不同的樣式,在電腦上是三列,在pad上應該也是 三列,在大屏手機上是三行,在屏幕小于320的手機上只顯示主要內容,隱藏掉了次要元素。(這里關于響應式布局還有個比較好的消息,就是拖動瀏覽器也可以 觸發判斷條件,測試的時候你不需要去找一堆手機,只要把自己的瀏覽器窗口縮小到一定尺寸就可以了。)

    我們認識下media query屬性吧。

    1. @media screen and (min-width: 320px) and (max-width : 479px)

    就從這個條件語句開始介紹,media屬性后面跟著的是一個 screen 的媒體類型(上面說過的十種媒體類型之一)。然后用 and 關鍵字來連接條件(其他關鍵字還有 not, only,看字面大家能理解,就不多說。),然后括號里就是一個媒體查詢語句,稍微懂點css的同學都能看懂,這個條件語句意思是在大于320小于479 的分辨率下所激活的樣式表。

    這個語句,就是響應式布局的基礎應用了。在判斷終端分辨率大小之后,賦予不同的樣式進去,就像我們的例子里

    1. @media screen and (max-width : 320px){
    2. body{...}
    3. }
    4. @media screen and (min-width: 800px) and (max-width: 1024px){
    5. body{...}
    6. }

    至于要判斷多少種分辨率,完全取決于你產品的需求,常見的分辨率有手機,平板(注意這些終端是存在 橫屏 豎屏 區別的,這個下一篇里提),桌面顯示器。自己為自己所面對的終端定制樣式。

    一般大于960的顯示器都可以用默認樣式而不必在媒體查詢里判斷了。有一種情況除外,就是高像素比的終端,比如 iphone4以上的retina屏,一個iphone5的小小的屏幕(iphone的屏幕是真小?。?,他的分辨率竟然達到了1136*640,幾乎等于 一個筆記本的分辨率。你在這樣小的物理顯示界面打開一個網頁,他用1136的分辨率來顯示,結果就是所有元素小的可憐。

    在面對這種分辨率精細的終端,我們有另外一個條件查詢語句 device-pixel-ratio。

    比如例子里的

    1. @media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)

    就是判斷終端的像素比是2的話,所渲染的樣式。iphone4以上像素比是2,高分辨率Andriod設備像素比是1.5,例子里只有像素比為2的查詢,1.5的或者其他比例方法一樣,前面用的是幾種瀏覽器的私有屬性,最后一種是通用屬性,

    1. @media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)

    等于

    1. @media only screen and (min-device-pixel-ratio: 2)

    為了一些版本的兼容性,不得已寫的長了。

    1. body{
    2. font-size:24px;
    3. }
    4. .box2{
    5. background: url(d/20.png) #ccc;
    6. background-size:50%;
    7. }

    在像素比為2的終端里這樣寫的目的,就是讓他顯示的更容易識別,一般來說顯示一張1px的背景圖片,我們要準備一張2px的,然后再background-size:50%這樣。1.5像素比同例。

    比如上面的demo,如果你用iphone4以上的蘋果手機來看,中間的背景圖片應該是顯示“2.0像素比”。

    這里也暴露了響應式一個很大的缺點:需要多做若干背景圖(作為內容顯示的圖片暫時無視,彈性圖片與彈性字體,下次單獨寫一篇介紹博文介紹)。

    對于media query的兼容性,我想不是很重要,因為很少有終端自帶IE9以下的瀏覽器?;径际歉呒墳g覽器。如果特殊需要,可以下載一個兼容的JS文件

    1. <!--[if lt IE 9]>
    2. <scriptsrc="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
    3. <![endif]-->

    以條件注釋的方式加在文件里。

    =========================================

    html5/css3響應式頁面的設計流程

    第一步:確定需要兼容的設備類型、屏幕尺寸

    通過用戶研究,了解用戶使用的設備分布情況,確定需要兼容的設備類型、屏幕尺寸。

    設備類型:包括移動設備(手機、平板)和pc。對于移動設備,設計和實現的時候注意增加手勢的功能。

    屏幕尺寸:包括各種手機屏幕的尺寸(包括橫向和豎向)、各種平板的尺寸(包括橫向和豎向)、普通電腦屏幕和寬屏。

    需要考慮的問題:

    • 某個頁面進行響應式設計時其適用的尺寸范圍是哪些?比如,1688搜索結果頁面,跨度可以從手機到寬屏,而1688首頁,由于結構過于復雜,想直接遷移到手機上,不太現實,不如直接設計一個手機版的首頁。
    • 結合用戶需求和實現成本,對適用的尺寸進行取舍。比如一些功能操作的頁面,用戶一般沒有在移動端進行操作的需求,沒有必要進行響應式設計。

    第二步:制作線框原型

    針對確定下來的幾個尺寸分別制作不同的線框原型,需要考慮清楚不同尺寸下,頁面的布局如何變化,內容尺寸如何縮放,功能、內容的刪減,甚至針對特殊的環境作特殊化的設計等。這個過程需要設計師和前端開發人員保持密切的溝通。

    第三步:測試線框原型

    將圖片導入到相應的設備進行一些簡單的測試,可幫助我們盡早發現可訪問性、可讀性等方面存在的問題。

    第四步:視覺設計

    注意,移動設備的屏幕像素密度與傳統電腦屏幕不一樣,在設計的時候需要保證內容文字的可讀性、控件可點擊區域的面積等。

    第五步:前端實現

    與傳統的web開發相比,響應式設計的頁面由于頁面布局、內容尺寸發生了變化,所以最終的產出更有可能與設計稿出入較大,需要前端開發人員和設計師多溝通。

    ↓ 查看全文

    html5/css3響應式布局介紹及設計流程由懶人建站收集整理,您可以自由傳播,請主動帶上本文鏈接

    懶人建站就是免費分享,覺得有用就多來支持一下,沒有能幫到您,懶人也只能表示遺憾,希望有一天能幫到您。

    html5/css3響應式布局介紹及設計流程-最新評論

    梦幻接高级宝石赚钱吗 股票涨跌西部证券 亿海配资 2013年快3投注技巧 安徽快3开奖现场直播 湖南快乐十分号码分布 股票指数的计算方法各个国家一样吗 双色球中奖规则和玩法 炒股入门最低多少钱 辽宁十一选五彩票网站 陕西11选5走势图44期