欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

定義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中定義了
Media Types
媒體類型		 CSS Version
版本		 Compatibility
兼容性		 Description
簡介
all CSS2 所有瀏覽器 用于所有媒體設(shè)備類型
aural CSS2 Opera 用于語音和音樂合成器
braille CSS2 Opera 用于觸覺反饋設(shè)備
handheld CSS2 Chrome,Safari,Opera 用于小型或手持設(shè)備
print 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計數(shù)器counter()的用法,是CSS入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下
    2015-09-26

  • CSS中的偽元素簡介

    這篇文章主要介紹了CSS中的偽元素,是CSS入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下
    2015-08-01

  • 簡介CSS中的各種選擇符

    這篇文章主要介紹了CSS中的各種選擇符,是CSS入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下
    2015-07-17

  • Markdown.css樣式簡介

    這篇文章主要介紹了Markdown.css樣式,用來實現(xiàn)顯示強大的Markdown樣式的文本,需要的朋友可以參考下
    2015-07-16

  • CSS3 Columns分列式布局方法簡介

    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教程之通用的css hack簡介

    本文主要介紹了通用的css hack
    2012-07-11

  • 網(wǎng)頁設(shè)計中的CSS Sprites技術(shù)介紹及其優(yōu)化方法

    CSS Sprites 技術(shù)對于廣大的前端工程師來說應(yīng)該是一點也不陌生。這個被國內(nèi)開發(fā)者昵稱為CSS精靈 CSS雪碧的家伙到底解決了什么問題，我們又怎樣合理使用這個技術(shù)呢?下面讓我
    2012-05-31

  • CSS 字體單位em簡介

    國外人士非常重視網(wǎng)站的易用性，相當(dāng)一部分外國站點已經(jīng)使用em作為字體單位.
    2009-12-27

最新評論