日本搞逼视频_黄色一级片免费在线观看_色99久久_性明星video另类hd_欧美77_综合在线视频

國內最全IT社區平臺 聯系我們 | 收藏本站
阿里云優惠2
您當前位置：首頁 > web前端 > htmlcss > CSS3 Media Queries，媒介設備查詢

CSS3 Media Queries，媒介設備查詢

來源：程序員人生   發布時間：2013-11-24 16:16:09 閱讀次數：3498次
允許通過 media 屬性為不同媒介設備（如屏幕、打印機）指定專用樣式表，而 CSS3 通過 media queries 使得更為行之有效。你可以為媒介類型添加某些查詢條件用以檢測設備，并采用不同的樣式表。例如，你可以有一個大屏幕顯示器的專用樣式和一個移動設備的專用樣式。這將非常強大，因為它允許不同的設備使用不同的界面外觀，但并不改變你的文檔內容。閱讀這篇文章來了解一下國外已經良好應用 media queries 的網站案例。

CSS3 Media Queries (演示稿)
點擊這個 演示稿 并且縮放的你瀏覽器窗口尺寸，觀察頁面元素的動態變化。

最大寬度

如果可視區域寬度小于 600 像素，以下 CSS 將被應用。

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

如果你想要引入獨立的樣式表，可以在 <head> 標簽對之間插入以下代碼行。

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

最小寬度

如果可視區域寬度大于 900 像素，以下 CSS 將被應用。

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

多媒介查詢

你可以組合多個媒介類型查詢，如果可視區域寬度介于 600 像素至 900 像素，以下代碼將被應用。

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

設備寬度

如果設備最大寬度為 480 像素（如 iPhone），以下代碼將被應用。注：最大設備寬度意味著設備的實際可視面積，最大寬度意味著可視區域面積。

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

iPhone 4 專用

以下代碼為 iPhone 4 專用。（案例：Thomas Maier）

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

iPad 專用

你也可以使用 media queries 來檢測 iPad 上橫向縱向坐標。（案例：Cloud Four）

<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 解決方案
不幸的事，Internet Explorer 8 或更早的版本并不支持 media queries。你可以使用 JavaScript 來彌補這一缺陷。以下是幾個解決方案：

1、CSS Tricks – using jQuery to detect browser size
2、The Man in Blue – using Javascript (這篇文章寫于六年前)
3、jQuery Media Queries Plugin

案例站點

你必須在支持 media queries 的高級瀏覽器如 Firefox、Chrome、Safari 中瀏覽以下站點。看看隨著窗口尺寸改變時，這些頁面布局是如何響應的。

Hicksdesign

大尺寸： 三欄式側邊欄
小尺寸： 兩欄式側邊欄（中間欄沉入左側欄）
更小尺寸： 一欄式側邊欄（右側欄移至 Logo 右方）
最小尺寸： 沒有側邊欄（Logo 和右側欄移至頂部，另一個側邊欄移至底部）

CSS3 Media Queries

Colly

根據瀏覽器可視區域的尺寸，布局在一欄式、兩欄式和四欄式之間切換。

CSS3 Media Queries

A List Apart

大尺寸：導航在頂部，一排圖片
中尺寸：導航在左側，三列圖片
小尺寸：導航在頂部，Logo 沒有背景圖片，三列圖片

CSS3 Media Queries

Tee Gallery

這個和上述 Colly 案例非常相似，但是不同之處在于 Tee Gallery 中的圖片會隨著窗口尺寸變化彈性地自適應。這里的技巧是使用百分比寬度，而不使用固定像素寬度。

CSS3 Media Queries

總結

請記住：擁有優化過的移動版樣式表并不意味著移動版網站的優化。真正的移動設備優化，圖片和標記語言也必須被縮減到最小，Media queries 目的是為設計表現，而不是優化。

英文原稿：CSS3 Media Queries | WebDesignerWall
翻譯整理：CSS3 Media Queries，媒介設備查詢 | 芒果

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
程序員人生
------分隔線----------------------------
分享到:
------分隔線----------------------------
為碼而活
積分：4237
15粉絲
7關注
欄目熱點
關閉
程序員人生
主站蜘蛛池模板： 淫男乱女 笨蛋英子 | 成人国产精品视频 | 色综综 | 在线一区二区视频 | av在线免费观看网址 | 国产精品久久久久久久久久久免费看 | 日韩欧美综合在线视频 | 国产欧美一区二区三区在线看 | 国产成人久久精品一区二区三区 | 中文字幕在线观看日本 | 精品国产91乱码一区二区三区 | 国产污视频在线 | 严国精品国产三级国产 | 自拍偷拍视频网站 | 18资源在线www免费 | 日本大黄视频 | 黄色不卡 | 国产午夜视频在线观看 | 中文字幕福利 | www.四虎.com| 日本一二区不卡 | 91av观看 | 久久综合成人网 | 国产一区二区在线看 | 亚洲激情在线视频 | 久久久久国产精品视频 | 欧美精选一区二区 | 亚洲免费视频一区二区 | 精品电影一区二区三区 | 久久成人精品 | 免费视频一区二区 | 亚洲精品在线免费 | 国产永久免费 | 亚洲三级在线看 | 干片网 | 亚洲成人黄色 | 国产精品二区三区 | 欧美精品一区二区三区四区五区 | 天天操 夜夜操 | 中文字幕一区二区三区免费视频 | 视频一区在线 |