HTML5實踐 — CSS3 Media Queries

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

文章目錄

　　CSS3 Media Queries
　　針對Internet Explorer的Media Queries
　　
　　樣本網站
　　總結

　　轉載請註明原創地址：http://www.cnblogs.com/softlover/archive/2012/11/25/2787429.html

　　demo查看地址：http://www.webdesignerwall.com/demo/media-queries/

　　CSS2允許你對特定media類型制定樣式，例如針對螢幕或者印表機。css3提供了更加強大的media queries，你可以針對不同media類型設定運算式，根據不同的條件設定不同的樣式。例如你可以為大螢幕設定一種樣式，為mobile設定另外一種樣式。這個功能相當強大，你可以不修改頁面內容的情況下，為不同裝置提供不同的樣式效果。下面的課程我們將會介紹到一些使用該技術的網站。

　　CSS3 Media Queries

　　開啟我的demo頁面，調整瀏覽器打大小，查看頁面配置變化情況。

　　Max Width

　　當整頁模式地區小於600px寬度的時候，css會被使用到。

@media screen and (max-width: 600px) {  .class {    background: #ccc;  }}

　　你也可以使用下面的方式，在頁面的<head>中引用外部css檔案。

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

　　Min Width

　　當視圖地區大於900px寬度的時候，css會被使用到。

@media screen and (min-width: 900px) {  .class {    background: #666;  }}

　　 多個 Media Queries

　　你可以把多個media queries組合在一起，當視圖地區寬度在600px到900px之間的時候，會使用下面的css。

@media screen and (min-width: 600px) and (max-width: 900px) {  .class {    background: #333;  }}

　　 裝置Width

　　下面的css會在 max-device-width為480px的時候使用，例如iphone。

　　note：max-device-width指的是裝置實際解析度，max-width指的是可是地區尺寸。

@media screen and (max-device-width: 480px) {  .class {    background: #000;  }}

　　 針對 iPhone 4

　　下面的時針對iphone4的css。

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />

　　 針對 iPad

　　你也可以在ipad上檢查定位（portrait 或者 landscapse）。

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

　　針對Internet Explorer的Media Queries

　　因為ie8以及之前版本的ie瀏覽器不支援media query，你需要使用JavaScript的hack計較解決問題。下面是一些解決方案：

CSS Tricks - 使用jquery判斷瀏覽器尺寸
The Man in Blue - 使用Javascript (這篇文章是六年前寫的)
jQuery Media Queries 外掛程式

　　　　樣本網站

　　你可以使用支援media query的瀏覽器訪問下面的網站，例如：Firefox, Chrome, 和 Safari。可以查看他們針對瀏覽器寬度所做的布局響應。

　　Hicksdesign

大尺寸: 3 列sidebar
小尺寸: 2 列sidebar (中間的sidebar跑到了左邊)
更小尺寸: 1 列sidebar （最右邊的跑到了logo下面）
最小尺寸: 沒有sidebar (logo 和右側的sidebar 上移，其他sidebar 下移)

　　Colly

　　頁面配置根據瀏覽器的可視地區，在1列、2列和4列之間切換。

　　A List Apart

大尺寸：導航在上不部, 1行圖片

中等尺寸：導航在左邊, 3列圖片

小尺寸：導航在上部，logo沒有背景圖片, 3列圖片

　　Tee Gallery

　　他和之前的Colly有點像，不同點在於它的圖片會根據頁面配置的變化，進行縮放。這裡使用的技巧就是，對圖片使用百分比寬度，代替固定寬度，例如：width=100%。

　　總結

　　我們需要注意到，針對mobile做了一個css，並不意味著我們的網站對mobile裝置就是最佳化的。對mobile裝置進行最佳化，網站圖片和html代碼同樣需要縮小尺寸，這樣才有益於載入。media query做到的只是設計展現，而不是最佳化操作。

　　原文地址：http://webdesignerwall.com/tutorials/css3-media-queries

HTML5實踐系列

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More