網站(zhàn)建設中不同分辨率顯示不同樣式的解決方法
在css2中允許我們使用media的屬性，例如使用screen和(hé)print，我也寫過一篇關于使用CSS media的print來(lái)定義打印網頁的樣式的文章，關于css2中的media文章，推薦下w3c的。今天來(lái)說說CSS3的Media Queries。CSS3中不僅僅可(kě)以使用screen和(hé)print，而且支持多(duō)媒體(tǐ)多(duō)分辨率的樣式表。
我們先來(lái)看下CSS3 Media Queries的演示實例：css3media.html，來(lái)自于（Web Designer Wall）
Max Width
故名思意，就是最大(dà)寬度的意思，例如下面的代碼是在寬度小(xiǎo)于600px的時(shí)候才執行(xíng)的。
@media screen and (max-width: 600px) {
.class {
background: #ccc;
}
}
也可(kě)以在link标簽裏面使用media屬性，即下面的寫法：
<link rel="stylesheet" media="screen and (max-width: 600px)" href="http://blog.163.com/wenchangqing_live/blog/small.css" />
Min Width
跟Max Width相反，是最小(xiǎo)寬度，例如當寬度大(dà)于900px的時(shí)候才運行(xíng)下面的代碼
@media screen and (min-width: 900px) {
.class {
background: #666;
}
}
也可(kě)以在link标簽裏面使用media屬性，即下面的寫法：
<link rel="stylesheet" media="screen and (min-width: 900px)" href="http://blog.163.com/wenchangqing_live/blog/big.css" />
Max和(hé)Min組合使用
例如下面的代碼是當屏幕的寬度在600px~900px之間(jiān)才有(yǒu)效的：
@media screen and (min-width: 600px) and (max-width: 900px) {
.class {
background: #333;
}
}
Device Width
這裏的意思指的是設備的最大(dà)寬度，就是屏幕的寬度，像素，例如下面的代碼:
@media screen and (max-device-width: 480px) {
.class {
background: #000;
}
}
IE6~IE8多(duō)分辨率兼容問題
引入 respond.min.js
下載地址：https://github.com/scottjehl/Respond
注意樣式必須使用 <link>标簽來(lái)引入，否則沒有(yǒu)效果。
我們先來(lái)看下CSS3 Media Queries的演示實例：css3media.html，來(lái)自于（Web Designer Wall）
Max Width
故名思意，就是最大(dà)寬度的意思，例如下面的代碼是在寬度小(xiǎo)于600px的時(shí)候才執行(xíng)的。
@media screen and (max-width: 600px) {
.class {
background: #ccc;
}
}
也可(kě)以在link标簽裏面使用media屬性，即下面的寫法：
<link rel="stylesheet" media="screen and (max-width: 600px)" href="http://blog.163.com/wenchangqing_live/blog/small.css" />
Min Width
跟Max Width相反，是最小(xiǎo)寬度，例如當寬度大(dà)于900px的時(shí)候才運行(xíng)下面的代碼
@media screen and (min-width: 900px) {
.class {
background: #666;
}
}
也可(kě)以在link标簽裏面使用media屬性，即下面的寫法：
<link rel="stylesheet" media="screen and (min-width: 900px)" href="http://blog.163.com/wenchangqing_live/blog/big.css" />
Max和(hé)Min組合使用
例如下面的代碼是當屏幕的寬度在600px~900px之間(jiān)才有(yǒu)效的：
@media screen and (min-width: 600px) and (max-width: 900px) {
.class {
background: #333;
}
}
Device Width
這裏的意思指的是設備的最大(dà)寬度，就是屏幕的寬度，像素，例如下面的代碼:
@media screen and (max-device-width: 480px) {
.class {
background: #000;
}
}
IE6~IE8多(duō)分辨率兼容問題
引入 respond.min.js
下載地址：https://github.com/scottjehl/Respond
注意樣式必須使用 <link>标簽來(lái)引入，否則沒有(yǒu)效果。
上(shàng)一條: 網站(zhàn)優化的一些(xiē)通(tōng)俗術(shù)語，你(nǐ)認識幾個(gè)呢？
下一條: 什麽是SSL證書(shū)
