定義css設備類型-Media Queries圖表簡介及使用方法

2024-07-11 08:29:04

字體：大中小

來源：轉載

供稿：網友

移動時代是任何網頁設計師和開發者不可忽略的一個時代，現在我設計的頁面有時會在電腦大屏幕上或者移動小屏幕上顯示。如何讓同一個網站同時適應完全不同尺寸的屏幕，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	用于凸點字符（盲文）印刷設備