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