溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

CSS3中的media媒體查詢

發(fā)布時(shí)間：2020-07-27 10:21:36 來(lái)源：網(wǎng)絡(luò) 閱讀：803 作者：EasonSeverus 欄目：開發(fā)技術(shù)

媒體查詢多用于響應(yīng)式網(wǎng)頁(yè)中。

1.初始化設(shè)置：

在HTML文件中，網(wǎng)頁(yè)頂部<head></head>標(biāo)簽中插入一句話：


<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

這句話在于對(duì)響應(yīng)式網(wǎng)頁(yè)做一個(gè)初始化設(shè)置，主要包括：

name="viewport"：標(biāo)記顯示設(shè)備為視口；

width = device-width：寬度等于當(dāng)前設(shè)備的寬度；

initial-scale：初始的縮放比例（默認(rèn)設(shè)置為1.0）；
minimum-scale：允許用戶縮放到的最小比例（默認(rèn)設(shè)置為1.0）；
maximum-scale：允許用戶縮放到的最大比例（默認(rèn)設(shè)置為1.0）；   
user-scalable：用戶是否可以手動(dòng)縮放（默認(rèn)設(shè)置為no，因?yàn)槲覀儾幌Ｍ脩舴糯罂s小頁(yè)面）。


2.解決IE瀏覽器的兼容性問題：

因?yàn)镮E瀏覽器(IE8)不支持HTML5和CSS3中的media，所以要加載用于解決IE瀏覽器兼容性問題的JS文件：


<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->


兩個(gè)<script></script>標(biāo)簽中的src屬性所指向的文件鏈接地址為固定地址中的文件，直接異地引用就好，不用下載到本地引用。

3.設(shè)置IE的渲染方式為最高：

現(xiàn)在有很多人的IE瀏覽器都升級(jí)到IE9以上，這個(gè)時(shí)候會(huì)有很多詭異的事情發(fā)生，例如現(xiàn)在是IE9的瀏覽器，但是瀏覽器的文檔模式卻是IE8，為了防止這種情況，我們需要下面這段代碼來(lái)讓IE的文檔模式永遠(yuǎn)都是最新：


<meta http-equiv="X-UA-Compatible" content="IE=edge">


當(dāng)然還有一個(gè)更給力的寫法：


<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">


這段代碼后面加了一個(gè)chrome=1，這是由于Google Chrome Frame（谷歌內(nèi)嵌瀏覽器框架GCF），如果用戶電腦安裝這個(gè)chrome插件，就可讓電腦內(nèi)的IE瀏覽器規(guī)避版本因素，使用Webkit引擎及V8引擎進(jìn)行排版及運(yùn)算。當(dāng)然如果用戶沒裝這個(gè)插件，這段代碼就會(huì)讓IE瀏覽器以最高的文檔模式展現(xiàn)效果。

4.CSS3 media 媒體查詢的寫法：

@media screen and (max-width: 960px){
	body{
		background: #000;
	}
}


這是一個(gè)media的標(biāo)準(zhǔn)寫法，在CSS文件中，意為：當(dāng)頁(yè)面小于960px時(shí)執(zhí)行以下CSS代碼，具體內(nèi)容暫不用管。

對(duì)于上述代碼中的screen，意為在告知設(shè)備在打印頁(yè)面時(shí)使用襯線字體，在屏幕上顯示時(shí)用無(wú)襯線字體。目前很多網(wǎng)站都會(huì)直接省略screen,從而不需要考慮用戶打印網(wǎng)頁(yè)的需求，所以又有這種寫法：


@media (max-width: 960px){
	body{
		background: #000;
	}
}

本著思維嚴(yán)謹(jǐn)?shù)脑瓌t，個(gè)人不會(huì)采用這種寫法。
5.CSS3媒體查詢主體代碼組合：


在響應(yīng)式網(wǎng)頁(yè)布局中需要持續(xù)運(yùn)用媒體查詢代碼組合，主要作用在于判斷所適配屏幕的寬度，并根據(jù)各種寬度條件套用不同的CSS樣式。

如當(dāng)屏幕寬度等于960px時(shí)，將網(wǎng)頁(yè)背景色變?yōu)榧t色：


@media screen and (max-device-width:960px){
	body{
		background:red;
	}
}


如當(dāng)屏幕寬度最大為960px（小于960px）時(shí)，將網(wǎng)頁(yè)背景色變?yōu)楹谏?/p>

@media screen and (max-width: 960px){
	body{
		background: #000;
	}
}

如當(dāng)屏幕寬度最小為960px（大于960px）時(shí)，將網(wǎng)頁(yè)背景色變?yōu)榻凵?br />

@media screen and (min-width:960px){
	body{
		background:orange;
	}
}

更為常見的是混合使用，如當(dāng)屏幕寬度介于960px和1200px之間時(shí)，將網(wǎng)頁(yè)背景色變?yōu)椤痢痢粒?/p>


@media screen and (min-width:960px) and (max-width:1200px){
	body{
		background:yellow;
	}
}

6.總體開發(fā)思路：


使用CSS3中媒體查詢的大致思路就是判斷網(wǎng)頁(yè)在不同設(shè)備中所處的寬度范圍，這樣的范圍可能有三種（PC、平板、手機(jī)），也可能有四種（PC、平板、中大屏手機(jī)、小屏手機(jī)），當(dāng)然也可能只需要兩種（平板、手機(jī)，PC端單獨(dú)開發(fā)一版時(shí)可不作為CSS3媒體查詢的使用對(duì)象），并為各種寬度范圍情況下的所需頁(yè)面元素套用不同的CSS樣式，從而適配各種設(shè)備。

7.響應(yīng)式網(wǎng)頁(yè)開發(fā)中的寬度問題：

在實(shí)際開發(fā)中，通常需要設(shè)置響應(yīng)式網(wǎng)頁(yè)寬度的最大值，一旦忽略最大寬度，臃腫或零散的網(wǎng)頁(yè)布局都會(huì)造成視覺洪災(zāi)，也就是我們常說的看起來(lái)很low。
另外談?wù)勀壳帮@示設(shè)備中的網(wǎng)頁(yè)寬度問題（由于篇幅問題，就不從工業(yè)革命開始扯了），目前最為常見的寬度基本上都是：大于或等于960px的PC端（1920px、1600px、1440px、1280px、1140px、960px）、960px至640px之間的平板端（768px、640px）以及640px以下的手機(jī)端（480px、320px），以上寬度存在已久，且顯示設(shè)備中的網(wǎng)頁(yè)寬度會(huì)長(zhǎng)期處于這樣的狀態(tài)下，在響應(yīng)式網(wǎng)頁(yè)寬度設(shè)計(jì)上，基本從這幾個(gè)尺寸考慮就已經(jīng)足夠。
8.media媒體查詢所有參數(shù)匯總：

媒體查詢器中還包含并不常用的相關(guān)功能，悉如示下：


  • width:瀏覽器可視寬度，

  • height:瀏覽器可視高度，

  • device-width:設(shè)備屏幕的寬度，

  • device-height:設(shè)備屏幕的高度，

  • orientation:檢測(cè)設(shè)備目前處于橫向還是縱向狀態(tài)，

  • aspect-ratio:檢測(cè)瀏覽器可視寬度和高度的比例(例如：aspect-ratio:16/9)，

  • device-aspect-ratio:檢測(cè)設(shè)備的寬度和高度的比例，

  • color:檢測(cè)顏色的位數(shù)（例如：min-color:32就會(huì)檢測(cè)設(shè)備是否擁有32位顏色），

  • color-index:檢查設(shè)備顏色索引表中的顏色（他的值不能是負(fù)數(shù)），

  • monochrome:檢測(cè)單色楨緩沖區(qū)域中的每個(gè)像素的位數(shù)（這個(gè)太高級(jí)，估計(jì)咱很少會(huì)用的到），

  • resolution:檢測(cè)屏幕或打印機(jī)的分辨率(例如：min-resolution:300dpi或min-resolution:118dpcm)，

  • grid：檢測(cè)輸出的設(shè)備是網(wǎng)格的還是位圖設(shè)備。

9.擴(kuò)展——在CSS2中同樣有媒體查詢：



media媒體查詢并不是CSS3誕生之后的專用功能，早在CSS2開始就已經(jīng)支持media，比如：

在HTML文件中的<head></head>標(biāo)簽中寫入這句：


<link rel="stylesheet" type="text/css" media="screen" href="style.css">


以上是CSS2實(shí)現(xiàn)的襯線用法，href屬性中寫入在某單一顯示設(shè)備中鏈接的CSS文件，但僅供入門，

如要判斷移動(dòng)設(shè)備是否為縱向放置的顯示屏，可以這樣寫：


<link rel="stylesheet" type="text/css" media="screen and (orientation:portrait)" href="style.css">


如要讓小于960px的頁(yè)面執(zhí)行指定的CSS樣式文件，可以這樣寫：


<link rel="stylesheet" type="text/css" media="screen and (max-width:960px)" href="style.css">


當(dāng)然，CSS2中的媒體查詢方法放到現(xiàn)在并不推薦使用，最大的弊端在于這樣會(huì)增加頁(yè)面http的請(qǐng)求次數(shù)，增加頁(yè)面負(fù)擔(dān)，使用CSS3中的媒體查詢才是目前的最佳方法。


向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手