下面我們一起來看看CSS3 Meida Queries在標準設備上的運用，大家可以把這些樣式加到你的樣式文件中，或者單獨創建一個名為“responsive.css”文件，并在相應的條件中寫上你的樣式，讓他適合你的設計需求：
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) {
/* 樣式寫在這 */
}
現在有關于這方面的運用也是相當的成熟，twitter的Bootstrap第二版本中就加上了這方面的運用。大家可以對比一下：
@media (max-width: 480px) { ... }
@media (max-width: 768px) { ... }
@media (min-width: 768px) and (max-width: 980px) { ... }
@media (min-width: 1200px) { .. }
復雜的示例在這里也無法學習，我們來看一個簡單的示例，在寬屏下是3列布局，當屏幕在小于480時是單列顯示?？匆幌掠覀菴SS編輯器中的代碼，思考一下效果實現的原理。
請驗證，完成請求
由于請求次數過多，請先驗證，完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報