css3提供了media queries（**查詢）的概念，可以利用它查詢以下資料：
1、瀏覽器視窗的寬和高；
2、裝置的寬和高；
3、裝置的手持方向，橫向/豎向；
4、解析度。
@media規則的語法格式如下：
@media:
(1)edia>:指定裝置名稱。css裝置型別包括如下這些：、
（2）:定義樣式表。
案例：
1結果：doctype html
>
2<
html
>
3<
head
>
4<
meta
charset
="utf-8"
>
5<
title
>
title
>
6<
style
type
="text/css"
>712
.viewing-area span
16/*
max-width：如果檢視視窗的寬度小於600畫素，則該盒子將變成品紅色
*/17
@media screen and (max-width:600px)
21span.lt60023}
24/*
min-width:如果檢視視窗大於900畫素，則該盒子將變成橙色
*/25
@media screen and (min-width:900px)
29span.gt90032}
33/*
min-width&max-width:如果視窗的寬度大於600畫素小於900畫素
*/34
@media screen and (min-width:600px) and (max-width:900px)
38span.bt600-90041}
42/*
max device width下面的樣式應用於ie iphone裝置，且裝置最大寬度為480畫素
*/43
/*@media screen and (max-device-width:480px)47}
*/48
style
>
49head
>
50<
body
>
51<
div
class
>如果檢視視窗小於600畫素，則該盒子就將程式設計品紅色
div>
52<
div
class
>如果檢視視窗大於900畫素，則該盒子將變成橙色
div>
53<
div
class
>如果檢視視窗介於600畫素和900畫素之間，則該盒子將變成藍色
div>
54<
div
class
>該盒子只能應用到ie iphone裝置，且裝置最大寬度為480畫素
div>
55<
p class
="viewing-area"
><
strong
>你當前檢視寬度是
strong
>：<
span
class
="lt600"
>小於600
span
><
span
class
="bt600-900"
>600-900
span
><
span
class
="gt900"
>大於900
span
>
p>
56body
>
57html
>
CSS學習 CSS學習筆記
出處 注 本學習筆記只是自己的一些備忘，初學者的東西不具有參考性，請到w3school 進行系統學習。學習css我使用的工具是visual css，可以實現同步預覽，快速學習編輯css。1.css的作用 用來規定網頁中的內容的顯示方式，避免給html增加很多的屬性而將 變得臃腫。2.css的應用方式...
CSS學習 CSS學習筆記
出處 注 本學習筆記只是自己的一些備忘，初學者的東西不具有參考性，請到w3school 進行系統學習。學習css我使用的工具是visual css，可以實現同步預覽，快速學習編輯css。1.css的作用 用來規定網頁中的內容的顯示方式，避免給html增加很多的屬性而將 變得臃腫。2.css的應用方式...
CSS 學習筆記
當同乙個html元素被不止乙個樣式定義時，會使用哪個樣式呢？一般而言，所有的樣式會根據下面的規則層疊於乙個新的虛擬樣式表中，其中數字4 擁有最高的優先權。1.瀏覽器預設設定 2.外部樣式表 3.內部樣式表 位於標籤內部 4.內聯樣式 在html 元素內部 因此，內聯樣式 在html 元素內部 擁有最...