下面我們一起來(lái)看看CSS3 Meida Queries在標(biāo)準(zhǔn)設(shè)備上的運(yùn)用，大家可以把這些樣式加到你的樣式文件中，或者單獨(dú)創(chuàng)建一個(gè)名為“responsive.css”文件，并在相應(yīng)的條件中寫上你的樣式，讓他適合你的設(shè)計(jì)需求：
1.1024px顯屏
@media screen and (max-width : 1024px) {
/* 樣式寫在這里 */
}
2.800px顯屏
@media screen and (max-width : 800px) {
/* 樣式寫在這里 */
}
3.640px顯屏
@media screen and (max-width : 640px) {
/* 樣式寫在這*/
}
4.iPad橫板顯屏
@media screen and (max-device-width: 1024px) and (orientation: landscape) {
/* 樣式寫在這 */
}
5.iPad豎板顯屏
@media screen and (max-device-width: 768px) and (orientation: portrait) {
/* 樣式寫在這 */
}
6.iPhone 和 Smartphones
@media screen and (min-device-width: 320px) and (min-device-width: 480px) {
/* 樣式寫在這 */
}
現(xiàn)在有關(guān)于這方面的運(yùn)用也是相當(dāng)?shù)某墒?，twitter的Bootstrap第二版本中就加上了這方面的運(yùn)用。大家可以對(duì)比一下：
@media (max-width: 480px) { ... }
@media (max-width: 768px) { ... }
@media (min-width: 768px) and (max-width: 980px) { ... }
@media (min-width: 1200px) { .. }
復(fù)雜的示例在這里也無(wú)法學(xué)習(xí)，我們來(lái)看一個(gè)簡(jiǎn)單的示例，在寬屏下是3列布局，當(dāng)屏幕在小于480時(shí)是單列顯示?？匆幌掠覀?cè)CSS編輯器中的代碼，思考一下效果實(shí)現(xiàn)的原理。
請(qǐng)驗(yàn)證，完成請(qǐng)求
由于請(qǐng)求次數(shù)過(guò)多，請(qǐng)先驗(yàn)證，完成再次請(qǐng)求
打開微信掃碼自動(dòng)綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報(bào)