移動時代是任何網頁設計師和開發者不可忽略的一個時代，現在我設計的頁面有時會在電腦大屏幕上或者移動小屏幕上顯示。如何讓同一個網站同時適應完全不同尺寸的屏幕，CSS3完美地解決了這些問題。在CSS2.1版本時候，我們曾經為網站設計不同的CSS樣式文件，如打印樣式表文件，手機樣式文件，電腦樣式文件等等，css3提出的MediaQueries解決了這些問題。
CSS3的MediaQueries可以幫助設計師獲取以下數據：

1.瀏覽器的窗口的寬度和高度，
2.設備的寬和高；
3.設備的手持方面，橫向還是豎向；
4.分辨率；

到目前為止，MediaQueries模塊得到了Firefox瀏覽器、Safari瀏覽器、Chrome瀏覽器以及Opera瀏覽器的支持。
MediaQueries的使用方法：
@media設備類型and(設備特性){樣式代碼}
在代碼的開頭必須要寫"@media",然后制定設備類型。css中定義了
Media Types
媒體類型CSS Version
版本Compatibility
兼容性Description
簡介

all	CSS2	所有瀏覽器	用于所有媒體設備類型
aural	CSS2	Opera	用于語音和音樂合成器
braille	CSS2	Opera	用于觸覺反饋設備
handheld	CSS2	Chrome,Safari,Opera	用于小型或手持設備
print	CSS2	所有瀏覽器	用于打印機
projection	CSS2	Opera	用于投影圖像，如幻燈片
screen	CSS2	所有瀏覽器	用于計算機顯示器
tty	CSS2	Opera	用于使用固定間距字符格的設備。如電傳打字機和終端
tv	CSS2	Opera	用于電視類設備
embossed	CSS2	Opera	用于凸點字符（盲文）印刷設備

設備特性的書寫放手與樣式的書寫方式很相似，分為兩個部分，當中有冒號分割，冒號前書寫設備的某種特性，冒號后書寫該特性的具體值
對于這13種設備特性的說明如下表：

特性	可指定的值	是否允許使用min/max前綴	特性說明
width	帶單位的長度數值	允許	瀏覽器窗口的寬度
height	帶單位的長度數值	允許	瀏覽器窗口的高度
device-width	帶單位的長度數值	允許	設備屏幕分辨率的寬度值
device-height	帶單位的長度數值	允許	設備屏幕分辨率的高度值
orientation	只能指定兩個值:portrait或landscape	不允許	瀏覽器窗口的方向是縱向還是橫向，當窗口的高度值大于等于高度值時，該特性值為portrait，
aspect-ratio	比例值，例如：16/9	允許	瀏覽器窗口的縱橫比，比例值為瀏覽器窗口的寬度值/高度值
device-aspect-ratio	比例值，例如：16/9	允許	設備屏幕分辨率的縱橫比，比例值為設備屏幕分辨率的寬度值/高度值
color	整數值	允許	設備使用多少位的顏色值，如果不是彩色設備，該值為0
color-index	整數值	允許	色彩表中的色彩數
monochrome	整數值	允許	單色幀緩沖器中每像素的字節數
resolution	分辨率值，譬如300dpi	允許	設備的分辨率
scan	只能指定兩個值：progressive或interlace	不允許	電視機類型設備的掃描方式，progressive表示逐行掃描，interlace表示隔行掃描
grid	只能指定兩個值:0或1	不允許	設備是基于柵格還是基于位圖?；跂鸥駮r該值為1，否則該值為0

使用and關鍵字來指定當某種設備類型的某種特性的值滿足某個條件時所使用的樣式，例如：
@mediascreenand(max-width:639px;)

設備特性的指定值接受min/max的前綴，用來表示大于或者小于等于的邏輯，以此避免使用<或者>這些字符。?

閱讀目錄

• viewport設置適應移動設備屏幕大小?
• Media Queries如何工作
• Media Queries語法總結
• media_type設備類型一覽表
• media_feature設備特征一覽表

回到頂部

viewport設置適應移動設備屏幕大小?

viewport：允許開發者創建一個虛擬窗口并自定義其窗口的大小或縮放功能

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0" />

代碼中的content屬性可以設置如下6種不同參數

回到頂部

Media Queries如何工作

1、定義當前屏幕可視區域的寬度最大值是600像素

<link href="small.css" rel="stylesheet" media="screen and(max-width:600px)"/>

那么small.css怎樣寫的呢

@media screen and (max-width:600px) {.demo {background-color:red;} }

2、定義當前屏幕可視區域的寬度長度在600到900像素之間

<link href="small.css" rel="stylesheet" media="screen and(min-width:600px) and(max-width:900px)"/> @media screen and (min-width:600px) and (max-width:900px) {.demo {background-color: red;} }

3、當移動屏幕處于縱向（portrait）模式下時，應用portrait樣式文件，當移動設備處于橫向（landscape）模式下，應用landscape樣式文件

<link href="protrait.css" rel="stylesheet" media="all and(orientation:portrait)"/><link href="landscape.css" rel="stylesheet" media="all and(orientation:landscape)"/>

?

回到頂部

Media Queries語法總結

語法格式如下圖所示：

1、使用Media Queries樣式模塊時都必須以“@media”方式開頭

2、media_query表示查詢關鍵定，比如說not only and 等等

• 　　not表示對后面的樣式表達式執行取反操作
• 　　only讓不支持Media Queries的設備但能讀取Media Type類型的瀏覽器忽略這個樣式，對于支持Media Queries的移動設備來說，如果存在only關鍵字，移動設備的瀏覽器會忽略only關鍵字并直接根據頁面的表達式應用樣式 文件

3、media_type 指定設備類型（也稱媒體類型）

4、media_feature定義css中的設備特征　　

回到頂部

media_type設備類型一覽表

回到頂部

media_feature設備特征一覽表

大部分設備特征都允許接受min/max的前綴

總結

以上是生活随笔為你收集整理的定义css设备类型-Media Queries图表简介及使用方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。