欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

CSS3中的media媒體查詢-創(chuàng)新互聯(lián)

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

公司主營業(yè)務(wù)：成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、移動(dòng)網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)推出嶺東免費(fèi)做網(wǎng)站回饋大家。

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

在HTML文件中，網(wǎng)頁頂部<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)頁做一個(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小頁面）。

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，為了防止這種情況，我們需要下面這段代碼來讓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)頁面小于960px時(shí)執(zhí)行以下CSS代碼，具體內(nèi)容暫不用管。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • width:瀏覽器可視寬度，

  • height:瀏覽器可視高度，

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

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

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

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

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

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

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

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

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

  • grid：檢測輸出的設(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的頁面執(zhí)行指定的CSS樣式文件，可以這樣寫：

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

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

創(chuàng)新互聯(lián)www.cdcxhl.cn，專業(yè)提供香港、美國云服務(wù)器，動(dòng)態(tài)BGP最優(yōu)骨干路由自動(dòng)選擇，持續(xù)穩(wěn)定高效的網(wǎng)絡(luò)助力業(yè)務(wù)部署。公司持有工信部辦法的idc、isp許可證， 機(jī)房獨(dú)有T級(jí)流量清洗系統(tǒng)配攻擊溯源，準(zhǔn)確進(jìn)行流量調(diào)度，確保服務(wù)器高可用性。佳節(jié)活動(dòng)現(xiàn)已開啟，新人活動(dòng)云服務(wù)器買多久送多久。

文章標(biāo)題：CSS3中的media媒體查詢-創(chuàng)新互聯(lián)
鏈接URL：http://chinadenli.net/article28/digecp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動(dòng)網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站、電子商務(wù)、網(wǎng)站內(nèi)鏈、網(wǎng)站維護(hù)、域名注冊(cè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

成都網(wǎng)站建設(shè)公司