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

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

  發(fā)布時間：2013-01-21 10:00:00   作者：佚名   我要評論
CSS3完美地解決了讓同一個網站同時適應完全不同尺寸的屏幕這些問題;css3提出的MediaQueries解決了為網站設計不同的CSS樣式文件，如打印樣式表文件，手機樣式文件，電腦樣式文件這些問題,感興趣的朋友可以了解下哦
移動時代是任何網頁設計師和開發(fā)者不可忽略的一個時代，現在我設計的頁面有時會在電腦大屏幕上或者移動小屏幕上顯示。如何讓同一個網站同時適應完全不同尺寸的屏幕，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 整數值 允許 單色幀緩沖器中每像素的字節(jié)數
resolution 分辨率值，譬如300dpi 允許 設備的分辨率
scan 只能指定兩個值：progressive或interlace 不允許 電視機類型設備的掃描方式，progressive表示逐行掃描，interlace表示隔行掃描
grid 只能指定兩個值:0或1 不允許 設備是基于柵格還是基于位圖。基于柵格時該值為1，否則該值為0

使用and關鍵字來指定當某種設備類型的某種特性的值滿足某個條件時所使用的樣式，例如：
@mediascreenand(max-width:639px;)
設備特性的指定值接受min/max的前綴，用來表示大于或者小于等于的邏輯，以此避免使用<或者>這些字符。

相關文章

  • 通過CSS3的object-fit來調整圖片適配尺寸的技巧簡介

    這篇文章主要介紹了通過CSS3的object-fit來調整圖片適配尺寸的技巧,包括用object-fit來居中并裁剪圖片的方法,需要的朋友可以參考下
    2016-02-27

  • CSS計數器counter()的用法簡介

    這篇文章主要介紹了CSS計數器counter()的用法,是CSS入門學習中的基礎知識,需要的朋友可以參考下
    2015-09-26

  • CSS中的偽元素簡介

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

  • 簡介CSS中的各種選擇符

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

  • Markdown.css樣式簡介

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

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

    CSS里一直有一個讓我們頭疼的問題，就是創(chuàng)建布局很麻煩。當然，有很多方式，有很多技術都可以創(chuàng)建各種布局，但我們總覺得CSS里應該提供一些新屬性，讓我們能更好的管理布局
    2014-05-03

  • css3背景圖片透明疊加屬性cross-fade簡介及用法實例

    據說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

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

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

  • CSS 字體單位em簡介

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

最新評論