定義css設(shè)備類型-Media Queries圖表簡介及使用方法
發(fā)布時間:2013-01-21 10:00:00 作者:佚名
我要評論

CSS3完美地解決了讓同一個網(wǎng)站同時適應(yīng)完全不同尺寸的屏幕這些問題;css3提出的MediaQueries解決了為網(wǎng)站設(shè)計不同的CSS樣式文件,如打印樣式表文件,手機樣式文件,電腦樣式文件這些問題,感興趣的朋友可以了解下哦
移動時代是任何網(wǎng)頁設(shè)計師和開發(fā)者不可忽略的一個時代,現(xiàn)在我設(shè)計的頁面有時會在電腦大屏幕上或者移動小屏幕上顯示。如何讓同一個網(wǎng)站同時適應(yīng)完全不同尺寸的屏幕,CSS3完美地解決了這些問題。在CSS2.1版本時候,我們曾經(jīng)為網(wǎng)站設(shè)計不同的CSS樣式文件,如打印樣式表文件,手機樣式文件,電腦樣式文件等等,css3提出的MediaQueries解決了這些問題。
CSS3的MediaQueries可以幫助設(shè)計師獲取以下數(shù)據(jù):
1.瀏覽器的窗口的寬度和高度,
2.設(shè)備的寬和高;
3.設(shè)備的手持方面,橫向還是豎向;
4.分辨率;
到目前為止,MediaQueries模塊得到了Firefox瀏覽器、Safari瀏覽器、Chrome瀏覽器以及Opera瀏覽器的支持。
MediaQueries的使用方法:
@media設(shè)備類型and(設(shè)備特性){樣式代碼}
在代碼的開頭必須要寫"@media",然后制定設(shè)備類型。css中定義了
設(shè)備特性的書寫放手與樣式的書寫方式很相似,分為兩個部分,當(dāng)中有冒號分割,冒號前書寫設(shè)備的某種特性,冒號后書寫該特性的具體值
對于這13種設(shè)備特性的說明如下表:
使用and關(guān)鍵字來指定當(dāng)某種設(shè)備類型的某種特性的值滿足某個條件時所使用的樣式,例如:
@mediascreenand(max-width:639px;)
設(shè)備特性的指定值接受min/max的前綴,用來表示大于或者小于等于的邏輯,以此避免使用<或者>這些字符。
CSS3的MediaQueries可以幫助設(shè)計師獲取以下數(shù)據(jù):
1.瀏覽器的窗口的寬度和高度,
2.設(shè)備的寬和高;
3.設(shè)備的手持方面,橫向還是豎向;
4.分辨率;
到目前為止,MediaQueries模塊得到了Firefox瀏覽器、Safari瀏覽器、Chrome瀏覽器以及Opera瀏覽器的支持。
MediaQueries的使用方法:
@media設(shè)備類型and(設(shè)備特性){樣式代碼}
在代碼的開頭必須要寫"@media",然后制定設(shè)備類型。css中定義了
Media Types 媒體類型 |
CSS Version 版本 |
Compatibility 兼容性 |
Description 簡介 |
---|---|---|---|
all | CSS2 | 所有瀏覽器 | 用于所有媒體設(shè)備類型 |
aural | CSS2 | Opera | 用于語音和音樂合成器 |
braille | CSS2 | Opera | 用于觸覺反饋設(shè)備 |
handheld | CSS2 | Chrome,Safari,Opera | 用于小型或手持設(shè)備 |
CSS2 | 所有瀏覽器 | 用于打印機 | |
projection | CSS2 | Opera | 用于投影圖像,如幻燈片 |
screen | CSS2 | 所有瀏覽器 | 用于計算機顯示器 |
tty | CSS2 | Opera | 用于使用固定間距字符格的設(shè)備。如電傳打字機和終端 |
tv | CSS2 | Opera | 用于電視類設(shè)備 |
embossed | CSS2 | Opera | 用于凸點字符(盲文)印刷設(shè)備 |
設(shè)備特性的書寫放手與樣式的書寫方式很相似,分為兩個部分,當(dāng)中有冒號分割,冒號前書寫設(shè)備的某種特性,冒號后書寫該特性的具體值
對于這13種設(shè)備特性的說明如下表:
特性 | 可指定的值 | 是否允許使用min/max前綴 | 特性說明 |
width | 帶單位的長度數(shù)值 | 允許 | 瀏覽器窗口的寬度 |
height | 帶單位的長度數(shù)值 | 允許 | 瀏覽器窗口的高度 |
device-width | 帶單位的長度數(shù)值 | 允許 | 設(shè)備屏幕分辨率的寬度值 |
device-height | 帶單位的長度數(shù)值 | 允許 | 設(shè)備屏幕分辨率的高度值 |
orientation | 只能指定兩個值:portrait或landscape | 不允許 | 瀏覽器窗口的方向是縱向還是橫向,當(dāng)窗口的高度值大于等于高度值時,該特性值為portrait, |
aspect-ratio | 比例值,例如:16/9 | 允許 | 瀏覽器窗口的縱橫比,比例值為瀏覽器窗口的寬度值/高度值 |
device-aspect-ratio | 比例值,例如:16/9 | 允許 | 設(shè)備屏幕分辨率的縱橫比,比例值為設(shè)備屏幕分辨率的寬度值/高度值 |
color | 整數(shù)值 | 允許 | 設(shè)備使用多少位的顏色值,如果不是彩色設(shè)備,該值為0 |
color-index | 整數(shù)值 | 允許 | 色彩表中的色彩數(shù) |
monochrome | 整數(shù)值 | 允許 | 單色幀緩沖器中每像素的字節(jié)數(shù) |
resolution | 分辨率值,譬如300dpi | 允許 | 設(shè)備的分辨率 |
scan | 只能指定兩個值:progressive或interlace | 不允許 | 電視機類型設(shè)備的掃描方式,progressive表示逐行掃描,interlace表示隔行掃描 |
grid | 只能指定兩個值:0或1 | 不允許 | 設(shè)備是基于柵格還是基于位圖?;跂鸥駮r該值為1,否則該值為0 |
使用and關(guān)鍵字來指定當(dāng)某種設(shè)備類型的某種特性的值滿足某個條件時所使用的樣式,例如:
@mediascreenand(max-width:639px;)
設(shè)備特性的指定值接受min/max的前綴,用來表示大于或者小于等于的邏輯,以此避免使用<或者>這些字符。
相關(guān)文章
通過CSS3的object-fit來調(diào)整圖片適配尺寸的技巧簡介
這篇文章主要介紹了通過CSS3的object-fit來調(diào)整圖片適配尺寸的技巧,包括用object-fit來居中并裁剪圖片的方法,需要的朋友可以參考下2016-02-27- 這篇文章主要介紹了CSS計數(shù)器counter()的用法,是CSS入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下2015-09-26
- 這篇文章主要介紹了CSS中的偽元素,是CSS入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下2015-08-01
- 這篇文章主要介紹了CSS中的各種選擇符,是CSS入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下2015-07-17
- 這篇文章主要介紹了Markdown.css樣式,用來實現(xiàn)顯示強大的Markdown樣式的文本,需要的朋友可以參考下2015-07-16
- CSS里一直有一個讓我們頭疼的問題,就是創(chuàng)建布局很麻煩。當(dāng)然,有很多方式,有很多技術(shù)都可以創(chuàng)建各種布局,但我們總覺得CSS里應(yīng)該提供一些新屬性,讓我們能更好的管理布局2014-05-03
css3背景圖片透明疊加屬性cross-fade簡介及用法實例
據(jù)說iOS6系統(tǒng)(iPhone5)增加了兩個CSS3屬性,一個是CSS3 filters – CSS3濾鏡另外一個是CSS3 Cross-fade – CSS3交叉淡入淡出,接下來為您介紹cross-fade屬性,感興趣的朋友2013-01-08- 本文主要介紹了通用的css hack2012-07-11
網(wǎng)頁設(shè)計中的CSS Sprites技術(shù)介紹及其優(yōu)化方法
CSS Sprites 技術(shù)對于廣大的前端工程師來說應(yīng)該是一點也不陌生。這個被國內(nèi)開發(fā)者昵稱為CSS精靈 CSS雪碧的家伙到底解決了什么問題,我們又怎樣合理使用這個技術(shù)呢?下面讓我2012-05-31- 國外人士非常重視網(wǎng)站的易用性,相當(dāng)一部分外國站點已經(jīng)使用em作為字體單位.2009-12-27