@media screen and (max-width: 300px)
}
media queries能在不同的條件下使用不同的樣式，使頁面在不同在終端裝置下達到不同的渲染效果。前面簡單的介紹了media queries如何引用到專案中，但media queries有其自己的使用規則。具體來說,media queries的使用方法如下。用法：@media **型別and （**特性）注意：使用media queries必須要使用「@media」開頭，然後指定**型別（也可以稱為裝置型別），隨後是指定**特性（也可以稱之為裝置特性）。**特性的書寫方式和樣式的書寫方式非常相似，主要分為兩個部分，第乙個部分指的是**特性，第二部分為**特性所指定的值，而且這兩個部分之間使用冒號分隔。例如：值描述
all用於所有裝置
aural
已廢棄。用於語音和聲音合成器
braille
已廢棄。 應用於盲文觸控式反饋裝置
embossed
已廢棄。 用於列印的盲人印刷裝置
handheld
已廢棄。 用於掌上裝置或更小的裝置，如pda和小型**
用於印表機和列印預覽
projection
已廢棄。 用於投影裝置
screen
用於電腦螢幕，平板電腦，智慧型手機等。
speech
應用於螢幕閱讀器等發聲裝置
tty已廢棄。 用於固定的字元網格，如電報、終端裝置和對字元有限制的便攜裝置
tv已廢棄。 用於電視和網路電視值描述
aspect-ratio
定義輸出裝置中的頁面可見區域寬度與高度的比率
color
定義輸出裝置每一組彩色原件的個數。如果不是彩色裝置，則值等於0
color-index
定義在輸出裝置的彩色查詢表中的條目數。如果沒有使用彩色查詢表，則值等於0
device-aspect-ratio
定義輸出裝置的螢幕可見寬度與高度的比率。
device-height
定義輸出裝置的螢幕可見高度。
device-width
定義輸出裝置的螢幕可見寬度。
grid
用來查詢輸出裝置是否使用柵格或點陣。
height
定義輸出裝置中的頁面可見區域高度。
max-aspect-ratio
定義輸出裝置的螢幕可見寬度與高度的最大比率。
max-color
定義輸出裝置每一組彩色原件的最大個數。
max-color-index
定義在輸出裝置的彩色查詢表中的最大條目數。
max-device-aspect-ratio
定義輸出裝置的螢幕可見寬度與高度的最大比率。
max-device-height
定義輸出裝置的螢幕可見的最大高度。
max-device-width
定義輸出裝置的螢幕最大可見寬度。
max-height
定義輸出裝置中的頁面最大可見區域高度。
max-monochrome
定義在乙個單色框架緩衝區中每畫素包含的最大單色原件個數。
max-resolution
定義裝置的最大解析度。
max-width
定義輸出裝置中的頁面最大可見區域寬度。
min-aspect-ratio
定義輸出裝置中的頁面可見區域寬度與高度的最小比率。
min-color
定義輸出裝置每一組彩色原件的最小個數。
min-color-index
定義在輸出裝置的彩色查詢表中的最小條目數。
min-device-aspect-ratio
定義輸出裝置的螢幕可見寬度與高度的最小比率。
min-device-width
定義輸出裝置的螢幕最小可見寬度。
min-device-height
定義輸出裝置的螢幕的最小可見高度。
min-height
定義輸出裝置中的頁面最小可見區域高度。
min-monochrome
定義在乙個單色框架緩衝區中每畫素包含的最小單色原件個數
min-resolution
定義裝置的最小解析度。
min-width
定義輸出裝置中的頁面最小可見區域寬度。
monochrome
定義在乙個單色框架緩衝區中每畫素包含的單色原件個數。如果不是單色裝置，則值等於0
orientation
定義輸出裝置中的頁面可見區域高度是否大於或等於寬度。
resolution
定義裝置的解析度。如：96dpi, 300dpi, 118dpcm
scan
定義電視類裝置的掃瞄工序。
width
定義輸出裝置中的頁面可見區域寬度。
使用demo如下：主要參考 避免鏈結失效，copy乙份要點如下
(max-width: 480px)上面表示的是：當螢幕小於或等於480px時,頁面中的廣告區塊（.ads）都將被隱藏。從前面表中可以得知，主要有十種**型別和13種**特性，將其組合就類似於不同的css集合。
但與css屬性不同的是，**特性是通過min/max來表示大於等於或小於做為邏輯判斷，
1. 最大寬度max-width
「max-width」是**特性中最常用的乙個特性，其意思是指**型別小於或等於指定的寬度時，樣式生效。如：
@media screen and (max-width:480px)
}
2.最小寬度min-width
「min-width」與「max-width」相反，指的是**型別大於或等於指定寬度時，樣式生效。
@media screen and (min-width:900px)3.多個**特性使用
當螢幕在600px~900px之間時，body的背景色渲染為「#f5f5f5」，如下所示。
@media screen and (min-width:600px) and (max-width:900px)4.裝置螢幕的輸出寬度device width}
在智慧型裝置上，例如iphone、ipad等，還可以根據螢幕裝置的尺寸來設定相應的樣式（或者呼叫相應的樣式檔案）。同樣的，對於螢幕裝置同樣可以使用「min/max」對應引數，如「min-device-width」或者「max-device-width」。
上面的**指的是「iphone.css」樣式適用於最大裝置寬度為480px，比如說iphone上的顯示，這裡的「max-device-width」所指的是裝置的實際解析度，也就是指可視面積解析度。@media not print and (max-width: 1200px)上面**表示的是：樣式**將被使用在除列印裝置和裝置寬度小於1200px下所有裝置中。
only用來指定某種特定的**型別，可以用來排除不支援**查詢的瀏覽器。其實only很多時候是用來對那些不支援media query但卻支援media type的裝置隱藏樣式表的。其主要有：支援**特性的裝置，正常呼叫樣式，此時就當only不存在；表示不支援**特性但又支援**型別的裝置，這樣就會不讀樣式，因為其先會讀取only而不是screen；另外不支援media queries的瀏覽器，不論是否支援only，樣式都不會被採用。如
在media query中如果沒有明確指定media type，那麼其預設為all，如： 另外在樣式中，還可以使用多條語句來將同乙個樣式應用於不同的**型別和**特性中，指定方式如下所示。 上面**中style.css樣式被用在寬度小於或等於480px的手持裝置上，或者被用於螢幕寬度大於或等於960px的裝置上。到目前為止，css3 media queries得到了眾多瀏覽器支援，除了ie6-8瀏覽器不支援之外，在所有現代瀏覽器中都可以完美支援。還有乙個與眾不同的是，media queries在其他瀏覽器中不要像其他css3屬性一樣在不同的瀏覽器中新增字首。
參考：
移動端螢幕適配
rem單位介紹 rem font size of the root element 是相對長度單位。相對於根元素 即html元素 font size計算值的倍數 移動端主要根據iphone5來參考適配，在谷歌瀏覽器中，1rem 16px iphone5的寬度是320px,320 16 20 動態設定...
移動端螢幕適配
方法一 查詢 比如說我們設定了html，然後給具體的dom設定p，其實就相當於設定了p，也就是1rem 1 html的fontsize 2.5rem 2.5 html的fontsize html media only screen and min width 360px media only scr...
Vue移動端螢幕適配
第一步 在src路徑下新建乙個js資料夾，在建立乙個resize.js檔案 第二部 在resize.js檔案內寫入以下 function doc,win if doc.addeventlistener return domcontentloaded是firefox下特有的event,當所有dom解析...