首頁 > 網絡推廣 > 響應式Web開發,必懂媒體查詢(系統理論+實戰教程)

響應式Web開發,必懂媒體查詢(系統理論+實戰教程)

2015-05-14 admin 網絡推廣 0人評論 39653

響應式Web開發,必懂媒體查詢(系統理論+實戰教程)  網絡推廣  第1張

【編者按】《移動Web手冊(雙色)》主要講解了移動Web開發核心要點,及與傳統PC網站開發的不同之處。適合前端開發工程師,對移動Web開發感興趣的手機App開發工程師以及測試工程師閱讀學習 。下面節選了該書中關于“媒體查詢”的精彩內容。

媒體查詢

3分快3 (本文)將系統地學習媒體查詢。媒體查詢其實就是CSS的if語句。如果寬度為800px或更寬,如果是橫屏,如果分辨率是1.5dppx或更小:使用這些CSS聲明。

媒體查詢有以下三種類型。

  1. 媒介類型查詢:這是什么類型的設備。
  2. 視口相關的媒體查詢——這一部分的核心。  
  3. 特性相關媒體查詢:瀏覽器是否支持特性X?

這一部分討論的媒體查詢只對整個頁面起作用。但是,對元素使用媒體查詢的想法浮出了水面。它們會根據特定元素而不是整個頁面的寬度或高度做出反應。這對Twitter或Facebook的組件等會有很大幫助。雖然在寫這本書的時候,元素媒體查詢還沒有被支持,甚至在語法和作用域上還沒有達成一致,但這是一個很好的想法,我希望它們最終會被實現。

我們將不會講最后一種類型。雖然有些內容可能對移動Web開發者有幫助,但目前被支持的功能是最沒用的,并且這些功能跟視口沒有任何關系。

媒體類型

原本的想法是,媒體類型可以讓你區分不同類型的設備。不幸的是,這個想法失敗了;唯一真正有用的媒體類型是print,其他類型從未被正確地實現。例如,TV瀏覽器應該支持tv類型但是它們沒有。類似的,移動設備應該響應媒體類型handheld,但是它們也沒有支持。它們不這樣做的原因是有益的。

在過去糟糕的日子中,在移動端瀏覽器最多只可以處理WAP和HTML的子集XHTML-MP時,它們大都遵循了標準并支持handheld。Web開發者迫切地為這些瀏覽器提供了更簡單的樣式和腳本,因為它們畢竟對標準支持得不完整。

如今到來的移動端瀏覽器,如Opera、Safari和BlackBerry,它們知道Web開發者是如何使用handheld類型的。由于它們正確地支持了HTML、CSS和JavaScript,所以它們希望獲得全部樣式和腳本。最直接的方法就是不要支持這個媒體查詢,所以它們這么做了。因此,現代移動端瀏覽器的標志就是不再支持handheld。TV瀏覽器廠商也做了一個類似的選擇。

又是一次一樣的競爭:Web開發者希望區分能力弱和能力強的瀏覽器;然后出現了新的瀏覽器版本,并處于能力弱的分類,為了避開開發者的探測,它們開始偽造自己的身份。當我們認為只有Netscape和IE可以的時候,小型瀏覽器也可以;移動端瀏覽器現在這么做,并且毫無疑問其他更多瀏覽器也會走這條道路。

3分快3 所以不要因為媒體類型操心了,除了print。print樣式表非常實用但沒被充分應用。雖然它們超出了本書的范圍,但是我強烈推薦你們在項目中使用它。

語法筆記

這是一個媒體查詢。樣式只有在布局視口的寬度小于或等于400px的時候才會起作用。

    @media all and (max-width: 400) {      div.sidebar {      // 這些給div.sidebar定義的樣式在寬度小于或等于400px時才會生效      }      }  

這里有很多重要的知識點。首先,所有媒體查詢都需要一個媒體類型,通常使用all是最好的。

第二點,你應該在你的媒體查詢中總是使用min-或max-前綴。通常情況下,你不關心一個準確的值,而是關心一個范圍。上面的例子只要在布局視口的寬度小于或等于400px的時候就會工作,下面我們看到的例子只有在分辨率小于或等于1.5的時候才會工作。

3分快3 最后,雖然沒有定義正式的單位,但媒體查詢的單位是像素。你也可以使用CSS的其他長度單位,如em或cm,不過你需要顯式地定義它們。只有百分比不是很有用,說句實話我甚至不確定它們是否已經被支持了。(另外,是什么的百分比呢?)

你可以盡情地使用媒體查詢。and是邏輯運算符and,逗號是邏輯運算符or。下面來看一個更復雜的例子。下一個媒體查詢會在布局視口寬度小于或等于400px,屏幕方向為豎直,分辨率小于或等于1.5的時候起作用。因為瀏覽器兼容性問題,最后一個條件需要兩個媒體查詢,并且它們被一個逗號分隔。(設備像素比小于或等于1.5,或分辨率小于或等于144dpi)。

    @media all and (max-width: 400) and (orientation: portrait)      and ((max-resolution: 144dpi),      (-webkit-max-device-pixel-ratio: 1.5)) {      /* 只有在布局視口不超過400px、設備處于豎屏模式,并且     devicePixelRatio小于等于1.5時才會生效 */      }  

寬度和高度

到目前為止,你將使用的最重要的媒體查詢是width。在必須使一些東西顯示在首屏的使用場景中才會使用到height。width和height的媒體查詢設置了當前布局視口的寬和高,并且在所有瀏覽器中都能工作。使用完美meta視口標簽,你可以放心地拋開布局視口的寬度,它現在與理想視口的尺寸相同。這是響應式設計的核心。

    @media all and (max-width: 400) {      div.sidebar {      // 在這里為div.sidebar定義的樣式在布局視口寬度不超過400px時生效      }      }  

height的使用沒那么簡單,因為它會算上瀏覽器的工具欄,并且這個工具欄會在用戶滾動的時候進入或離開可見區域。盡情地使用它吧,不過給瀏覽器一些決定高度的余地。

在媒體查詢中使用em

3分快3 媒體查詢中的em單位值得我們注意。在寫這本書的時候它非常流行,雖然它沒有犯任何錯誤,不過在我心中它是被高估了。并且它們沒有天生比像素優秀,除了一個特定的使用場景。

在CSS中,1em等于一個字體的大小;對于一個14px的字體,1em將等于14px寬。術語font size通常是指你的CSS給元素設置的字體大小,但在媒體查詢中它指的是文檔根元素的字體大小。就是html元素的字體大小。畢竟媒體查詢是對整個頁面起作用的,而不是對某一個特定元素。

html元素的默認字體大小是16px,所以1em默認為16px寬。當然,你可以改變根元素的字體大小:如果你把它設為12px,那么1em就是12px寬;如果你把它設為20px,那么1em就是20px寬,依此類推。

3分快3 在移動端,根元素的字體大小在你縮放的時候是不會變的。縮放是放大CSS像素的過程,這個過程跟字體大小沒有任何關系,所以不管用戶縮放了多少,1em的寬度還是同樣多的CSS像素。因此,在移動端,em并不比像素優秀。

3分快3 在桌面上會比較復雜。我們在前面說到的頁面縮放在放大CSS像素尺寸的同時不會改變字體大小,所以同樣的,在這種場景下em也不比像素有優勢。但是,Firefox和Safari仍然支持文字大小縮放,這種方式的縮放只使文字大小改變。這是em比像素優秀的一個真實使用場景。另外一個使用場景是用戶在他們的瀏覽器偏好設置中設置了一個不同的,更大的字體。在這種情況下,em也比像素提供了更好的閱讀體驗。不幸的是,我沒發現多少人會這么做,不管是在手機還是桌面上。

換句話說,em只有在你的網站的根元素字體大小有可能改變并且你希望布局根據這個變化改變的時候比像素優秀。如果你的網站是這樣的情況,那么可使用em。在所有其他場景中,使用em還是像素無關緊要。em仍然能正常工作,并且有時候使用em比使用像素表述布局更符合邏輯,但是它們沒有比像素優秀很多。

device-width和device-height

3分快3 你應該避免使用device-width和device-height,因為它們在所有瀏覽器上總是使用screen.width和screen.height。就像我們將要提到的,這些JavaScript屬性既可能給出的是理想視口的尺寸,也可能給出設備像素的數量。因此,你無法預知獲得的信息是否正確。這使得使用device-width和deviceheight非常危險。

device-pixel-ratio和分辨率

我們已經討論了分辨率,它是理想視口與屏幕物理像素尺寸的比。因此分辨率的媒體查詢對任何與設備物理尺寸有關的問題都沒有幫助,雖說它們可以幫助你決定在用戶使用類似視網膜屏幕的時候是否使用高分辨率圖片。

這里有瀏覽器兼容性問題:基于WebKit的瀏覽器需要使用-webkitdevice-pixel-ratio,而所有其他瀏覽器需要使用分辨率。雖說長遠看來分辨率會取勝,但目前你仍然需要-webkit-device-pixel-ratio。

3分快3 在2013的秋天,我通過我的讀者們進行了一個關于視口的調查,我提出的一個問題是,他們在媒體查詢中會檢查哪個分辨率。一半以上的人回復他們會檢查device pixel ratio 1.5這個值。所以這似乎是一種新興的業界標準。你可以在http://smashed.by/mwhb7看到調查結果。

有一個附加的技巧:單位。-webkit-device-pixel-ratio不需要單位,它只是一個跟window.devicePixelRatio對應的整數。另一方面,分辨率接受dpi和dppx兩個單位。我們已經討論過:1dppx等同于設備像素比為1,同時96dpi等同于1dppx。所有瀏覽器都支持dpi,但沒有都支持dppx,所以最好使用dpi。這里有一個跨瀏覽器的解決方案:

    @media all and ((-webkit-min-device-pixel-ratio: 1.5),      (min-resolution: 144dpi)) {      // 定義設備像素比大于等于1.5時的樣式      }  

3分快3 如果你想要知道分辨率是否大于或等于1.5,請再一次使用min-前綴。

 

標簽:

發表評論

◎歡迎參與討論,請在這里發表您的看法、交流您的觀點。

官方微信公眾號
70755559
09:00 - 22:00
QQ客服: 70755559
客服郵箱: 678128@qq.com
2分快3-推荐 1分快3-官网 好运快3-欢迎您 幸运快3-安全购彩 网投app-Welcome 分分快3app-Home 1分快三平台-3分快3 彩票代理-推荐 五福彩票-官网 彩票大赢家-欢迎您