<返回列表

新聞分類

新聞中心

網(wǎng)站建設(shè)中不同分辨率顯示不同樣式的解決方法

在css2中允許我們使用media的屬性，例如使用screen和print，我也寫過一篇關(guān)于使用CSS media的print來定義打印網(wǎng)頁(yè)的樣式的文章，關(guān)于css2中的media文章，推薦下w3c的。今天來說說CSS3的Media Queries。CSS3中不僅僅可以使用screen和print，而且支持多媒體多分辨率的樣式表。

我們先來看下CSS3 Media Queries的演示實(shí)例：css3media.html，來自于（Web Designer Wall）
Max Width

故名思意，就是最大寬度的意思，例如下面的代碼是在寬度小于600px的時(shí)候才執(zhí)行的。
@media screen and (max-width: 600px) {
.class {
background: #ccc;
}
}

也可以在link標(biāo)簽里面使用media屬性，即下面的寫法：
<link rel="stylesheet" media="screen and (max-width: 600px)" href="http://blog.163.com/wenchangqing_live/blog/small.css" />
Min Width

跟Max Width相反，是最小寬度，例如當(dāng)寬度大于900px的時(shí)候才運(yùn)行下面的代碼

@media screen and (min-width: 900px) {
.class {
background: #666;
}
}

也可以在link標(biāo)簽里面使用media屬性，即下面的寫法：
<link rel="stylesheet" media="screen and (min-width: 900px)" href="http://blog.163.com/wenchangqing_live/blog/big.css" />
Max和Min組合使用

例如下面的代碼是當(dāng)屏幕的寬度在600px~900px之間才有效的：
@media screen and (min-width: 600px) and (max-width: 900px) {
.class {
background: #333;
}
}
Device Width

這里的意思指的是設(shè)備的最大寬度，就是屏幕的寬度，像素，例如下面的代碼:
@media screen and (max-device-width: 480px) {
.class {
background: #000;
}
}


IE6~IE8多分辨率兼容問題
引入 respond.min.js
下載地址：https://github.com/scottjehl/Respond
注意樣式必須使用  <link>標(biāo)簽來引入，否則沒有效果。
掃碼加客服微信
確 認(rèn)