css中怎么判斷不同分辨率顯示不同寬度布局

本篇文章給大家分享的是有關(guān)css中怎么判斷不同分辨率顯示不同寬度布局，小編覺(jué)得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說(shuō)，跟著小編一起來(lái)看看吧。

成都創(chuàng)新互聯(lián)公司是一家專(zhuān)業(yè)提供遂川企業(yè)網(wǎng)站建設(shè),專(zhuān)注與成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站、成都外貿(mào)網(wǎng)站建設(shè)公司、H5開(kāi)發(fā)、小程序制作等業(yè)務(wù)。10年已為遂川眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專(zhuān)業(yè)網(wǎng)站設(shè)計(jì)公司優(yōu)惠進(jìn)行中。

使用CSS單詞與語(yǔ)法

代碼如下:


@media screen and (判斷屬性){ CSS樣式選擇器 }

這里注意花括號(hào)里裝要變化CSS樣式選擇器。

三、不同分辨率顯示不同寬度樣式案例

1、DIVCSS小案例描述
我們首先設(shè)置一個(gè)DIV盒子CSS命名為“.abc”，設(shè)置其高度為300px，css邊框?yàn)楹谏?；以及設(shè)置margin:0 auto布局居中。預(yù)先設(shè)置這兩個(gè)樣式是為了便于觀察。
我們通過(guò)手動(dòng)拖拽瀏覽器顯示寬度，然后觀察此盒子寬度變化情況，當(dāng)瀏覽器寬度調(diào)節(jié)到寬度不大于500px時(shí)，對(duì)應(yīng)此盒子寬度顯示100px；調(diào)節(jié)瀏覽器寬度不大于901px時(shí)，顯示“.abc”對(duì)應(yīng)盒子寬度顯示200px;當(dāng)調(diào)節(jié)瀏覽器寬度大于1201px時(shí)，盒子對(duì)象寬度顯示1200px；當(dāng)小于1200px時(shí)候顯示寬度為900px。

2、CSS代碼

代碼如下:


.abc{ height:300px; border:1px solid #000; margin:0 auto}
@media screen and (min-width: 1201px) {
.abc {width: 1200px}  
}
/* css注釋?zhuān)涸O(shè)置了瀏覽器寬度不小于1201px時(shí) abc 顯示1200px寬度 */

@media screen and (max-width: 1200px) {
.abc {width: 900px}  
}
/* 設(shè)置了瀏覽器寬度不大于1200px時(shí) abc 顯示900px寬度 */

@media screen and (max-width: 901px) {
.abc {width: 200px;}  
}
/* 設(shè)置了瀏覽器寬度不大于901px時(shí) abc 顯示200px寬度 */

@media screen and (max-width: 500px) {
.abc {width: 100px;}  
}
/* 設(shè)置了瀏覽器寬度不大于500px時(shí) abc 顯示100px寬度 */

需要注意是CSS代碼順序，由大到小排版CSS（判斷瀏覽器寬度越大越放前），這樣是因?yàn)檫壿嬯P(guān)系，@media 判斷CSS排錯(cuò)將導(dǎo)致判斷失效。

3、HTML代碼

代碼如下:


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>無(wú)標(biāo)題文檔</title>
<style>
.abc{ height:300px; border:1px solid #000; margin:0 auto}
@media screen and (min-width: 1201px) {
.abc {width: 1200px}  
}
/* 設(shè)置了瀏覽器寬度不小于1201px時(shí) abc 顯示1200px寬度 */

@media screen and (max-width: 1200px) {
.abc {width: 900px}  
}
/* 設(shè)置了瀏覽器寬度不大于1200px時(shí) abc 顯示900px寬度 */

@media screen and (max-width: 900px) {
.abc {width: 200px;}  
}
/* 設(shè)置了瀏覽器寬度不大于900px時(shí) abc 顯示200px寬度 */

@media screen and (max-width: 500px) {
.abc {width: 100px;}  
}
/* 設(shè)置了瀏覽器寬度不大于500px時(shí) abc 顯示100px寬度 */

</style>
</head>
<body>
<div class="abc">DIVCSS5實(shí)例：我這個(gè)DIV寬度會(huì)隨瀏覽器寬度變化哦，試試改變?yōu)g覽器寬度</div>
</body>
</html>

4、為了兼容IE9以下版本瀏覽器需要加入一個(gè)google的JS，當(dāng)然可以下載引人html

代碼如下:


<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->


將JS代碼放入</head>標(biāo)簽前即可，這里直接引人google在線JS，你可以下載此JS文件重新HTML引人即可。

5、完美兼容各大瀏覽器HTML+CSS+JS源代碼

代碼如下:


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>無(wú)標(biāo)題文檔</title>
<style>
.abc{ height:300px; border:1px solid #000; margin:0 auto}
@media screen and (min-width: 1201px) {
.abc {width: 1200px}  
}
/* css 注釋說(shuō)明：設(shè)置了瀏覽器寬度不小于1201px時(shí) abc 顯示1200px寬度 */

@media screen and (max-width: 1200px) {
.abc {width: 900px}  
}
/* 設(shè)置了瀏覽器寬度不大于1200px時(shí) abc 顯示900px寬度 */

@media screen and (max-width: 900px) {
.abc {width: 200px;}  
}
/* 設(shè)置了瀏覽器寬度不大于900px時(shí) abc 顯示200px寬度 */

@media screen and (max-width: 500px) {
.abc {width: 100px;}  
}
/* 設(shè)置了瀏覽器寬度不大于500px時(shí) abc 顯示100px寬度 */

</style>
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
</head>
<body>
<div class="abc">DIVCSS5實(shí)例：我這個(gè)DIV寬度會(huì)隨瀏覽器寬度變化哦，試試改變?yōu)g覽器寬度</div>
</body>
</html>

以上就是css中怎么判斷不同分辨率顯示不同寬度布局，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見(jiàn)到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

名稱(chēng)欄目：css中怎么判斷不同分辨率顯示不同寬度布局
分享鏈接：http://muchs.cn/article38/geojpp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、網(wǎng)站建設(shè)、App開(kāi)發(fā)、網(wǎng)站維護(hù)、云服務(wù)器、電子商務(wù)

廣告

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

外貿(mào)網(wǎng)站建設(shè)