CSS3媒體查詢(xún)與頁(yè)面自適應(yīng)示例詳解
我要評(píng)論2017年9月，W3C發(fā)布媒體查詢(xún)(Media Query Level 4)候選推薦標(biāo)準(zhǔn)規(guī)范，它擴(kuò)展了已經(jīng)發(fā)布的媒體查詢(xún)的功能。該規(guī)范用于CSS的@media規(guī)則，可以為文檔設(shè)定特定條件的樣式，也可以用于HTML、JavaScript等語(yǔ)言。
1、媒體查詢(xún)基礎(chǔ)
媒體查詢(xún)可以根據(jù)設(shè)備特性，如屏幕寬度、高度、設(shè)備方向（橫向或縱向），為設(shè)備定義獨(dú)立的CSS樣式表。一個(gè)媒體查詢(xún)由一個(gè)可選的媒體類(lèi)型和零個(gè)或多個(gè)限制范圍的表達(dá)式組成，如寬度、高度和顏色。
1.1、媒體類(lèi)型和媒體查詢(xún)
CSS2提出媒體類(lèi)型(Media Type)的概念，它允許為樣式表設(shè)置限制范圍的媒體類(lèi)型。例如，僅供打印的樣式表文件、僅供手機(jī)渲染的樣式表文件、僅供電視渲染的樣式表文件等，具體說(shuō)明如下表所示：
通過(guò)HTML標(biāo)簽的media屬性定義樣式表的媒體類(lèi)型，具體方法如下：
- 定義外部樣式表文件的媒體類(lèi)型。 <link href="csss.css" rel="stylesheet" type="text/css" media="handheld" />
- 定義內(nèi)部樣式表文件的媒體類(lèi)型。 <style type="text/css" media="screen"> ... </style>CSS3在媒體類(lèi)型的基礎(chǔ)上，提出了Media Queries（媒體查詢(xún)）的概念。媒體查詢(xún)比CSS2的媒體類(lèi)型功能更加強(qiáng)大、更加完善。兩者的主要區(qū)別：媒體查詢(xún)是一個(gè)值或一個(gè)范圍的值，而媒體類(lèi)型僅僅是設(shè)備的匹配。媒體類(lèi)型可以幫助用戶(hù)獲取以下數(shù)據(jù)。
- 瀏覽器窗口的寬和高。
- 設(shè)備的寬和高。
- 設(shè)備的手持方向，橫向還是豎向。
- 分辨率。
例如，下面這條導(dǎo)入外部樣式表的語(yǔ)句：
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
在media屬性中設(shè)置媒體查詢(xún)的條件(max-width: 600px)：當(dāng)屏幕寬度小于或等于600px時(shí)，則調(diào)用small.css樣式表渲染頁(yè)面。
1.2、使用@media
CSS3使用@media規(guī)則定義媒體查詢(xún)，簡(jiǎn)化語(yǔ)法格式如下：
@media [only | not]? <media_type> [and <expression>]* | <expression> [and <expression>]*{
/* CSS樣式列表 */
}參數(shù)簡(jiǎn)單說(shuō)明如下：
<media_type>：指定媒體類(lèi)型，具體說(shuō)明參考上表所示。<expression>：指定媒體特性。放在一對(duì)圓括號(hào)中，如(min-width:400px)。- 邏輯運(yùn)算符，如and（邏輯與）、not（邏輯否）、only（兼容設(shè)備）等。
媒體特性包括13種，接收單個(gè)的邏輯表達(dá)式作為值，或者沒(méi)有值。大部分特性接收min或max的前綴，用來(lái)表示大于等于或者小于等于的邏輯，以此避免使用大于號(hào)(>)和小于號(hào)(<)字符。
在CSS樣式的開(kāi)頭必須定義@media關(guān)鍵字，然后指定媒體類(lèi)型，再指定媒體特性。媒體特性的格式與樣式的格式相似，分為兩部分，由冒號(hào)分隔，冒號(hào)前指定媒體特性，冒號(hào)后指定該特性的值。
【示例1】下面語(yǔ)句指定了當(dāng)設(shè)備顯示屏幕寬度小于640px時(shí)所使用的樣式：
@media screen and (max-width: 639px) {
/*樣式代碼*/
}【示例2】可以使用多個(gè)媒體查詢(xún)將同一個(gè)樣式應(yīng)用于不同的媒體類(lèi)型和媒體特性中，媒體查詢(xún)之間通過(guò)逗號(hào)分隔，類(lèi)似于選擇器分組：
@media handheld and (min-width:360px),screen and (min-width:480px) {
/*樣式代碼*/
}【示例3】可以在表達(dá)式中加上not、only和and等邏輯運(yùn)算符：
//下面樣式代碼將被使用在除便攜設(shè)備之外的其他設(shè)備或非彩色便攜設(shè)備中
@media not handheld and (color) {
/*樣式代碼*/
}
//下面樣式代碼將被使用在所有非彩色設(shè)備中
@media all and (not color) {
/*樣式代碼*/
}【示例4】only運(yùn)算符能夠讓不支持媒體查詢(xún)，但是支持媒體類(lèi)型的設(shè)備，將忽略表達(dá)式中的樣式。例如：
@media only screen and (color) {
/*樣式代碼*/
}對(duì)于支持媒體查詢(xún)的設(shè)備來(lái)說(shuō)，能夠正確地讀取其中的樣式，仿佛only運(yùn)算符不存在一樣；對(duì)于不支持媒體查詢(xún)，但支持媒體類(lèi)型的設(shè)備（如IE8）來(lái)說(shuō)，可以識(shí)別@media screen關(guān)鍵字，但是由于先讀取的是only運(yùn)算符，而不是screen關(guān)鍵字，將忽略這個(gè)樣式。
提示：媒體查詢(xún)也可以用在@import規(guī)則和標(biāo)簽中。例如：
@import url(example.css) screen and (width:800px);
//下面代碼定義了如果頁(yè)面通過(guò)屏幕呈現(xiàn)，且屏幕寬度不超過(guò)480px，則加載shetland.css樣式表
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="shetland.css" />1.3、應(yīng)用@media
【示例1】and運(yùn)算符用于符號(hào)兩邊規(guī)則均滿(mǎn)足條件的匹配。
@media screen and (max-width : 600px) {
/*匹配寬度小于等于600px的屏幕設(shè)備*/
}【示例2】not運(yùn)算符用于取非，即所有不滿(mǎn)足該規(guī)則的均匹配。
@media not print {
/*匹配除了打印機(jī)以外的所有設(shè)備*/
}注意：not僅應(yīng)用于整個(gè)媒體查詢(xún):
@media not all and (max-width : 500px) {}
/*等價(jià)于*/
@media not (all and (max-width : 500px)) {}
/*而不是*/
@media (not all) and (max-width : 500px) {}在逗號(hào)媒體查詢(xún)列表中，not僅會(huì)否定它所在的媒體查詢(xún)，而不影響其他的媒體查詢(xún)。
如果在復(fù)雜的條件中使用not運(yùn)算符，要顯式添加小括號(hào)，避免歧義。
【示例3】，（逗號(hào)）相當(dāng)于or運(yùn)算符，用于兩邊有一條滿(mǎn)足則匹配:
@media screen , (min-width : 800px) {
/*匹配屏幕或者寬度大于等于800px的設(shè)備*/
}【示例4】在媒體類(lèi)型中，all是默認(rèn)值，匹配所有設(shè)備:
@media all {
/*可以過(guò)濾不支持media的瀏覽器*/
}常用的媒體類(lèi)型有screen匹配屏幕顯示器、print匹配打印輸出。
【示例5】使用媒體查詢(xún)時(shí)，必須加括號(hào)，一個(gè)括號(hào)就是一個(gè)查詢(xún):
@media (max-width : 600px) {
/*匹配界面寬度小于等于600px的設(shè)備*/
}
@media (min-width : 400px) {
/*匹配界面寬度大于等于400px的設(shè)備*/
}
@media (max-device-width : 800px) {
/*匹配設(shè)備（不是界面）寬度小于等于800px的設(shè)備*/
}
@media (min-device-width : 600px) {
/*匹配設(shè)備（不是界面）寬度大于等于600px的設(shè)備*/
}提示：在設(shè)計(jì)手機(jī)網(wǎng)頁(yè)時(shí)，應(yīng)該使用device-width/device-height，因?yàn)槭謾C(jī)瀏覽器默認(rèn)會(huì)對(duì)頁(yè)面進(jìn)行一些縮放，如果按照設(shè)備的寬、高進(jìn)行匹配，會(huì)更接近預(yù)期的效果。
【示例6】媒體查詢(xún)?cè)试S相互嵌套，這樣可以?xún)?yōu)化代碼，避免冗余:
@media not print {
/*通用樣式*/
@media (max-width:600px) {
/*此條匹配寬度小于等于600px的非打印機(jī)設(shè)備 */
}
@media (min-width:600px) {
/*此條匹配寬度大于等于600px的非打印機(jī)設(shè)備 */
}
}【示例7】在設(shè)計(jì)響應(yīng)式頁(yè)面時(shí)，用戶(hù)應(yīng)該根據(jù)實(shí)際需要，先確定自適應(yīng)分辨率的閥值，也就是頁(yè)面響應(yīng)的臨界點(diǎn):
@media (min-width: 768px){
/* >=768px的設(shè)備 */
}
@media (min-width: 992px){
/* >=992px的設(shè)備 */
}
@media (min-width: 1200){
/* >=1200px的設(shè)備 */
}注意：下面樣式順序是錯(cuò)誤的，因?yàn)楹竺娴牟樵?xún)范圍將覆蓋前面的查詢(xún)范圍，導(dǎo)致前面的媒體查詢(xún)失效。
@media (min-width: 1200){ }
@media (min-width: 992px){ }
@media (min-width: 768px){ }因此，當(dāng)我們使用min-width媒體特性時(shí)，應(yīng)該按從小到大的順序設(shè)計(jì)各個(gè)閥值。同理如果使用max-width時(shí)，就應(yīng)該按從大到小的順序設(shè)計(jì)各個(gè)閥值。
@media (max-width: 1199){
/* <=1199px的設(shè)備 */
}
@media (max-width: 991px){
/* <=991px的設(shè)備 */
}
@media (max-width: 767px){
/* <=768px的設(shè)備 */
}【示例8】用戶(hù)可以創(chuàng)建多個(gè)樣式表，以適應(yīng)不同媒體類(lèi)型的寬度范圍。當(dāng)然，更有效率的方法是將多個(gè)媒體查詢(xún)整合在一個(gè)樣式表文件中，這樣可以減少請(qǐng)求的數(shù)量:
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/*樣式列表 */
}
@media only screen and (min-width : 321px) {
/*樣式列表 */
}
@media only screen and (max-width : 320px) {
/*樣式列表 */
}【示例9】如果從資源的組織和維護(hù)的角度考慮，可以選擇使用多個(gè)樣式表的方式實(shí)現(xiàn)媒體查詢(xún)，這樣做更高效。
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
<link rel="stylesheet" media="screen and (min-width: 600px)" href="large.css" />
<link rel="stylesheet" media="print" href="print.css" />【示例10】使用orientation屬性可以判斷設(shè)備屏幕當(dāng)前是橫屏（值為landscape）還是豎屏（值為portrait）。
@media screen and (orientation: landscape) {
.iPadLandscape {
width: 30%;
float: right;
}
}
@media screen and (orientation: portrait) {
.iPadPortrait {clear: both;}
}不過(guò)，orientation屬性只在iPad上有效，對(duì)于其他可以轉(zhuǎn)屏的設(shè)備（如iPhone），可以使用min-device-width和max-device-width變通實(shí)現(xiàn)。
【擴(kuò)展】媒體查詢(xún)僅是一種純CSS方式實(shí)現(xiàn)響應(yīng)式Web設(shè)計(jì)的方法，也可以使用JavaScript庫(kù)來(lái)實(shí)現(xiàn)同樣的設(shè)計(jì)。例如，下載css3-mediaqueries.js(http://code.google.com/p/css3-mediaqueries-js/)，然后在頁(yè)面中調(diào)用。對(duì)于老式瀏覽器（如IE6、IE7、IE8）可以考慮使用css3-mediaqueries.js兼容。
<!–[if lt IE 9]>
<script src=”http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js”></script>
<![endif]–>【示例11】演示使用jQuery檢測(cè)瀏覽器寬度，并為不同的視口調(diào)用不同的樣式表。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(window).bind("resize", resizeWindow);
function resizeWindow(e){
var newWindowWidth = $(window).width();
if(newWindowWidth < 600){
$("link[rel=stylesheet]").attr({href : "mobile.css"});
}
else if(newWindowWidth > 600){
$("link[rel=stylesheet]").attr({href : "style.css"});
}
}
});
</script>2、案例實(shí)戰(zhàn)
2.1、判斷顯示屏幕寬度
下面示例演示如何正確使用@media規(guī)則，判斷當(dāng)前視口寬度位于什么范圍。示例代碼如下：
<style type="text/css">
.wrapper { /* 定義測(cè)試條的樣式 */
padding: 5px 10px; margin: 40px;
text-align:center; color:#999;
border: solid 1px #999;
}
.viewing-area span { /* 默認(rèn)情況下隱藏提示文本信息 */
color: #666;
display: none;
}
/* 應(yīng)用于移動(dòng)設(shè)備，且設(shè)備最大寬度為480px */
@media screen and (max-device-width: 480px) {
.a { background: #ccc;}
}
/* 顯示屏幕寬度小于等于600px */
@media screen and (max-width: 600px) {
.b {
background: red; color:#fff;
border: solid 1px #000;
}
span.lt600 { display: inline-block; }
}
/* 顯示屏幕寬度介于600～900px */
@media screen and (min-width: 600px) and (max-width: 900px) {
.c {
background: red; color:#fff;
border: solid 1px #000;
}
span.bt600-900 { display: inline-block; }
}
/* 顯示屏幕寬度大于等于900px */
@media screen and (min-width: 900px) {
.d {
background: red; color:#fff;
border: solid 1px #000;
}
span.gt900 { display: inline-block; }
}
</style>
<div class="wrapper a">設(shè)備最大寬度為480px。</div>
<div class="wrapper b">顯示屏幕寬度小于等于600px </div>
<div class="wrapper c">顯示屏幕寬度介于600～900px</div>
<div class="wrapper d">顯示屏幕寬度大于等于900px </div>
<p class="viewing-area">
<strong>當(dāng)前顯示屏幕寬度：</strong>
<span class="lt600">小于等于600px</span>
<span class="bt600-900">介于600～900px</span>
<span class="gt900">大于等于900px</span>
</p>示例設(shè)計(jì)當(dāng)顯示屏幕寬度小于等于600px時(shí)，則高亮顯示<div class="wrapper b">測(cè)試條，并在底部顯示提示信息：小于等于600px；當(dāng)顯示屏幕寬度介于600～900px時(shí)，則高亮顯示<div class="wrapper c">測(cè)試條，并在底部顯示提示信息：介于600～900px；顯示屏幕寬度大于等于900px時(shí)，則高亮顯示<div class="wrapper d">測(cè)試條，并在底部顯示提示信息：大于等于900px；當(dāng)設(shè)備寬度小于等于480px時(shí)，則高亮顯示<div class="wrapper a">測(cè)試條。
2.2、設(shè)計(jì)響應(yīng)式版式
本案例在頁(yè)面中設(shè)計(jì)3個(gè)欄目。
<div id="main">：主要內(nèi)容欄目。<div id="sub">：次要內(nèi)容欄目。<div id="sidebar">：側(cè)邊欄欄目。
構(gòu)建的頁(yè)面結(jié)構(gòu)如下：
<div id="container">
<div id="wrapper">
<div id="main">
<h1>水調(diào)歌頭·明月幾時(shí)有</h1>
<h2>蘇軾</h2>
<p>……</p>
</div>
<div id="sub">
<h2>宋詞精選</h2>
<ul>
<li>……</li>
</ul>
</div>
</div>
<div id="sidebar">
<h2>詞人列表</h2>
<ul>
<li>……</li>
</ul>
</div>
</div>設(shè)計(jì)頁(yè)面能夠自適應(yīng)屏幕寬度，呈現(xiàn)不同的版式布局。當(dāng)顯示屏幕寬度在999px以上時(shí)，讓3個(gè)欄目并列顯示；當(dāng)顯示屏幕寬度在639px以上、1000px以下時(shí)，設(shè)計(jì)兩欄目顯示；當(dāng)顯示屏幕寬度在640px以下時(shí)，讓3個(gè)欄目堆疊顯示。
<style type="text/css">
/* 默認(rèn)樣式 */
/* 網(wǎng)頁(yè)寬度固定，并居中顯示 */
#container { width: 960px; margin: auto;}
/*主體寬度 */
#wrapper {width: 740px; float: left;}
/*設(shè)計(jì)3欄并列顯示*/
#main {width: 520px; float: right;}
#sub { width: 200px; float: left;}
#sidebar { width: 200px; float: right;}
/* 窗口寬度在999px以上 */
@media screen and (min-width: 1000px) {
/* 3欄顯示*/
#container { width: 1000px; }
#wrapper { width: 780px; float: left; }
#main {width: 560px; float: right; }
#sub { width: 200px; float: left; }
#sidebar { width: 200px; float: right; }
}
/* 窗口寬度在639px以上、1000px以下 */
@media screen and (min-width: 640px) and (max-width: 999px) {
/* 2欄顯示 */
#container { width: 640px; }
#wrapper { width: 640px; float: none; }
.height { line-height: 300px; }
#main { width: 420px; float: right; }
#sub {width: 200px; float: left; }
#sidebar {width: 100%; float: none; }
}
/* 窗口寬度在640px以下 */
@media screen and (max-width: 639px) {
/* 1欄顯示 */
#container { width: 100%; }
#wrapper { width: 100%; float: none; }
#main {width: 100%; float: none; }
#sub { width: 100%; float: none; }
#sidebar { width: 100%; float: none; }
}
</style>當(dāng)顯示屏幕寬度在999px以上時(shí)，3欄并列顯示，預(yù)覽效果如下圖：
到此這篇關(guān)于CSS3媒體查詢(xún)與頁(yè)面自適應(yīng)的文章就介紹到這了,更多相關(guān)CSS3媒體查詢(xún)與頁(yè)面自適應(yīng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
CSS3 最強(qiáng)二維布局系統(tǒng)之Grid 網(wǎng)格布局
CS3的Grid網(wǎng)格布局是目前最強(qiáng)的二維布局系統(tǒng),可以同時(shí)對(duì)列和行進(jìn)行處理,將網(wǎng)頁(yè)劃分成一個(gè)個(gè)網(wǎng)格,可以任意組合不同的網(wǎng)格,做出各種各樣的布局，本文介紹CSS3 最強(qiáng)二維布局系2025-02-27- 本文介紹了如何使用CSS3的transform屬性和動(dòng)畫(huà)技巧實(shí)現(xiàn)波浪式圖片墻,通過(guò)設(shè)置圖片的垂直偏移量,并使用動(dòng)畫(huà)使其周期性地改變位置,可以創(chuàng)建出動(dòng)態(tài)且具有波浪效果的圖片墻,同2025-02-27
CSS3模擬實(shí)現(xiàn)一個(gè)雷達(dá)探測(cè)掃描動(dòng)畫(huà)特效(最新推薦)
文章介紹了如何使用CSS3實(shí)現(xiàn)一個(gè)雷達(dá)探測(cè)掃描的效果,包括夜色背景、蜘蛛網(wǎng)盤(pán)、掃描體的轉(zhuǎn)動(dòng)效果、尾巴陰影以及被掃描到的光點(diǎn),通過(guò)HTML和CSS的配合,實(shí)現(xiàn)了豐富的動(dòng)畫(huà)效果,2025-02-21- CSS3的Flexbox是一種強(qiáng)大的布局模式,通過(guò)設(shè)置display:flex可以輕松實(shí)現(xiàn)對(duì)齊、排列和分布網(wǎng)頁(yè)元素,它解決了傳統(tǒng)布局方法中的對(duì)齊、間距分配和自適應(yīng)布局等問(wèn)題,接下來(lái)通過(guò)本2025-02-19
css3 實(shí)現(xiàn)icon刷新轉(zhuǎn)動(dòng)效果
本文給大家介紹css3 實(shí)現(xiàn)icon刷新轉(zhuǎn)動(dòng)效果，文章開(kāi)頭給大家介紹了webkit-transform、animation、@keyframes這三個(gè)屬性，結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，感興趣的朋友一2025-02-19CSS3動(dòng)態(tài)效果之過(guò)渡屬性(最新推薦)
CSS3過(guò)渡屬性用于實(shí)現(xiàn)元素從一種樣式平滑過(guò)渡到另一種樣式,通過(guò)設(shè)置transition-property過(guò)渡屬性、transition-duration過(guò)渡時(shí)長(zhǎng)transition-timing-function過(guò)渡函數(shù)和trans2025-02-19CSS3實(shí)現(xiàn)動(dòng)態(tài)旋轉(zhuǎn)加載樣式的示例代碼
本文介紹了如何使用CSS3創(chuàng)建一個(gè)簡(jiǎn)單的動(dòng)態(tài)旋轉(zhuǎn)加載樣式,通過(guò)定義一個(gè)帶有類(lèi)名“l(fā)oader”的HTML元素,并使用CSS樣式和@keyframes規(guī)則來(lái)實(shí)現(xiàn)旋轉(zhuǎn)動(dòng)畫(huà),你可以根據(jù)需要調(diào)整樣式2025-02-19使用CSS3實(shí)現(xiàn)平滑的過(guò)渡動(dòng)畫(huà)效果(實(shí)例代碼)
這篇文章主要介紹了如何使用CSS3的transition屬性實(shí)現(xiàn)平滑的過(guò)渡動(dòng)畫(huà)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，感興趣的朋友一起看看吧2025-02-13
CSS3中使用flex和grid實(shí)現(xiàn)等高元素布局的示例代碼
本文介紹了使用CSS3中的Flexbox和Grid布局實(shí)現(xiàn)等高元素布局的方法,通過(guò)簡(jiǎn)單的兩列實(shí)現(xiàn)、每行放置3列以及全部代碼的展示,展示了這兩種布局方式的實(shí)現(xiàn)細(xì)節(jié)和效果，感興趣的朋2025-02-11使用CSS3和SVG創(chuàng)建圓形進(jìn)度條動(dòng)畫(huà)效果
CSS3和SVG的結(jié)合使用為網(wǎng)頁(yè)設(shè)計(jì)帶來(lái)了創(chuàng)新的動(dòng)態(tài)視覺(jué)效果,本文通過(guò)一個(gè)圓形進(jìn)度條的動(dòng)畫(huà)特效示例,展示了如何利用CSS3的動(dòng)畫(huà)功能和SVG的矢量圖形能力來(lái)創(chuàng)建豐富的用戶(hù)交互體2024-10-24
