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

media type(媒體類型)與media query(媒體查詢)簡介及使用方法介紹

  發(fā)布時間：2012-12-27 10:56:35   作者：佚名   我要評論
media type(媒體類型)是css 2中的一個非常有用的屬性，通過media type我們可以對不同的設(shè)備指定特定的樣式，從而實現(xiàn)更豐富的界面。media query(媒體查詢)是對media type的一種增強，是CSS 3的重要內(nèi)容之一,需要了解的朋友可以參考下
media type(媒體類型)是css 2中的一個非常有用的屬性，通過media type我們可以對不同的設(shè)備指定特定的樣式，從而實現(xiàn)更豐富的界面。media query(媒體查詢)是對media type的一種增強，是CSS 3的重要內(nèi)容之一。隨著移動互聯(lián)網(wǎng)的發(fā)展，media query開始得到大家的重視。

media type
讓我們先了解一下media type，其實這個大家會比較熟悉一點，我們通常會用到的media type會是all 和screen，然后是print，一些網(wǎng)站會專門通過print類型為頁面的打印格式提供更友好的界面。
其實，media type有很多種：
類型 解釋
all 所有設(shè)備
braille 盲文
embossed 盲文打印
handheld 手持設(shè)備
print 文檔打印或打印預(yù)覽模式
projection 項目演示，比如幻燈
screen 彩色電腦屏幕
speech 演講
tty 固定字母間距的網(wǎng)格的媒體，比如電傳打字機
tv 電視
media type的幾種使用方法
我們可以通過幾種方法來聲明media type：
方法一

復(fù)制代碼
代碼如下:

<link href="style.css" media="screen print" ...

方法二

復(fù)制代碼
代碼如下:

<?xml-stylesheet media="screen" href="style.css"...

方法三

復(fù)制代碼
代碼如下:

@import url("style.css") screen;

方法四

復(fù)制代碼
代碼如下:

<style media="screen">
@import url("style.css");
</style>

方法五

復(fù)制代碼
代碼如下:

@media screen{
selector{rules}
}

當然，這幾種方法各有利弊，而我們常用的是第一種和最后一種方法。

media type的瀏覽器支持
IE5.5/6/7不支持在@import中使用媒體類型
Safari/firefox只支持all,screen,print三種類型(包括iphone)
Opera 完全支持
Opera mini 支持handheld，未指定則使用screen
Windows Mobile系統(tǒng)中的IE支持handheld，其它支持不明…

media query
正如前文所說，media query是CSS 3對media type的增強，事實上我們可以將media query看成是media type+css屬性判斷。
請注意，下面提到的一些關(guān)鍵字等內(nèi)容，有些是在media type中就可用的，但是放到media query中將能更好的發(fā)揮其作用，所以我就在適當?shù)牡胤揭搿?
css屬性判斷可以只是某個CSS屬性的名稱，也可以是屬性+值：

復(fù)制代碼
代碼如下:

<link rel="stylesheet" media="screen and (animation)” herf=“…”

如果設(shè)備支持CSS動畫，那么就能執(zhí)行這個外部樣式表文件。

復(fù)制代碼
代碼如下:

@media screen and (max-width:240px){
body{font-size:medium;}
}

如果設(shè)備的瀏覽器的最大寬度是240px，則頁面將使用中號字體。
PS:屬性和值之間是用冒號連接的，而不是等號，這與正常的CSS的寫法一致。

媒體查詢語句結(jié)構(gòu)
我們可以將上述語句稱為媒體查詢語句，這樣也更能理解一些。從上面的例子也可以看出，媒體查詢語句一般由media type+一到多個CSS屬性判斷組成，而多個CSS屬性判斷可以用關(guān)鍵字and連接：

復(fù)制代碼
代碼如下:

@media screen and (min-width:1024px) and (max-width:1280px){
body{font-size:medium;}
}

其中media type可以省略，屬性值也可以為空：

復(fù)制代碼
代碼如下:

@media (color:4){}


復(fù)制代碼
代碼如下:

@media (color){}

當然，請注意，有屬性值和沒有屬性值的情況代表的意義是不一樣的，所以上面的這兩條規(guī)則不是等價的。
而針對多個媒體類型的CSS規(guī)則，可以用逗號來隔開：

復(fù)制代碼
代碼如下:

@media handheld and (min-width:360px),screen and (min-width:480px){
body{font-size:large;}
}


復(fù)制代碼
代碼如下:

@media screen and (min-width:800px),print and (min-width:7in){
body{font-size:small;}
}


media query支持的屬性
事實上，media query支持的屬性和我們常用的CSS屬性是不太一樣的，它們是一些特別定義的條目：
屬性 值 Min/Max 描述
color 整數(shù) yes 每種色彩的字節(jié)數(shù)
color-index 整數(shù) yes 色彩表中的色彩數(shù)
device-aspect-ratio 整數(shù)/整數(shù) yes 寬高比例
device-height length yes 設(shè)備屏幕的輸出高度
device-width length yes 設(shè)備屏幕的輸出寬度
grid 整數(shù) no 是否是基于格柵的設(shè)備
height length yes 渲染界面的高度
monochrome 整數(shù) yes 單色幀緩沖器中每像素字節(jié)
resolution 分辨率(“dpi/dpcm”) yes 分辨率
scan Progressive interlaced no tv媒體類型的掃描方式
width length yes 渲染界面的寬度
orientation Portrait/landscape no 橫屏或豎屏

從這些屬性中我們可以看出，media query就是為了更好的適配各種設(shè)備而生的。

瀏覽器擴展
webkit
webkit是最早實現(xiàn)media query支持的瀏覽器內(nèi)核之一，同時它也根據(jù)自己的需要搞了一些特有的擴展屬性，最常用的有：
transform-2d 只用于支持使用 -webkit-transform實現(xiàn)2D變換的瀏覽器
transform-3d 只用于支持使用 -webkit-transform實現(xiàn)3D變換的瀏覽器
transition 只用于支持使用-webkit-transition實現(xiàn)變換效果的瀏覽器
animation 只用于支持使用-webkit-animation實現(xiàn)動畫的瀏覽器

詳情請看這里：http://webkit.org/specs/MediaQueriesExtensions.html
firefox
firefox也提供一些自己的擴展，不過由于firefox瀏覽器的手機版現(xiàn)在還很弱，所以很少會用到，感興趣的同學(xué)可以到https://developer.mozilla.org/En/CSS/Media_queries查閱。
max與min
細心的同學(xué)可能已經(jīng)注意到前面用到的這兩個關(guān)鍵詞，他們是要配合支持它們的屬性使用的，它們的意義與我們常用的max-width和minwidth等類似。
各屬性對max和min的支持在前面的屬性列表中有給出，這里是一個詳細的列表：
height min-height max-height
device-width min-device-width max-device-width
device-height min-device-height max-device-height
aspect-ratio min-aspect-ratio max-aspect-ratio
device-aspect-ratio min-device-aspect-ratio max-device-aspect-ratio
color min-color max-color
color-index min-color-index max-color-index
Monochrome min-monochrome max-monochrome
Resolution min-resolution max-resolution

not/only
媒體類型還支持 not和only關(guān)鍵字，它們可以用來更方便的定位某個媒體設(shè)備：
not：排除某種制定的媒體類型

復(fù)制代碼
代碼如下:

@media not print and (color){
}

only：指定某種特定的媒體類型，可以用來排除不支持媒體查詢的瀏覽器：

復(fù)制代碼
代碼如下:

@media only screen and (color){
}

media query的瀏覽器支持：
IE 9以下不支持
Firefox 3.5+(Gecko 1.9.1+)支持
Opera 9.5+完全支持
Opera mini 5支持
webkit 支持大部分屬性(safari 3.0的內(nèi)核版本是522，iPhone 1代的safari的內(nèi)核版本是524，webkit大概從這個時候開始支持media query，但是對部分屬性比如projection支持不好)
iPhone OS 3.2之前的版本不支持orientation屬性，iPad和iPhone 4支持該屬性。
iPhone Safari不支持orientation(iPhone 4支持)

實例：
現(xiàn)在讓我們來看一些典型的例子：
檢測iPhone safari：

復(fù)制代碼
代碼如下:

<link media="only screen and (max-device-width: 480px)" href="style.css">

這是apple官方網(wǎng)站推薦的一種定位iPhone safari瀏覽器的方法，在iPhone一代和2代的時代，這條規(guī)則的確能夠正確的判斷出iPhone的瀏覽器，但是后來出現(xiàn)了Android的大屏幕手機，比如Nexus One和HTC desire，這條規(guī)則也能適配這些480px寬度的機器。

Google的iPhone橫屏樣式：
Google之前通過以下方式為iPhone手機提供橫屏樣式(因為最早的3代iPhone手機不支持orientation屬性)：

復(fù)制代碼
代碼如下:

@media screen and (max-height:300px){
#linksDiv{
margin-top:10px;
}
...
}

android手機的多分辨率問題：
android系統(tǒng)的開放性導(dǎo)致其終端的多樣性，那么對于各種各樣的android手機來說，屏幕分辨率的差異導(dǎo)致針對android手機的頁面重構(gòu)復(fù)雜性增加，那么我們可以用media query為每種分辨率提供特定樣式：

復(fù)制代碼
代碼如下:

/* for 240 px width screen */
@media only screen and (max-device-width:240px){
selector{
}
}
/* for 360px width screen */
@media only screen and (min-device-width:241px) and (max-device-width:360px){
selector{
}
}
/* for 480 px width screen */
@media only screen (min-device-width:361px)and (max-device-width:480px){
selector{
}
}

device-aspect-ratio
device-aspect-ratio可以用來適配特定屏幕長寬比的設(shè)備，這也是一個很有用的屬性，比如，我們的頁面想要對長寬比為4:3的普通屏幕定義一種樣式，然后對于16:9和16:10的寬屏，定義另一種樣式，比如自適應(yīng)寬度和固定寬度：

復(fù)制代碼
代碼如下:

/* for 4:3 screen */
@media only screen and (device-aspect-ratio:4/3){
selector{
}
}
/* for 16:9 and 16:10 screen */
@media only screen and (device-aspect-ratio:16/9) and (device-aspect-ratio:16/10){
selector{
}
}

當然，對于手機也可以使用這個屬性，比如對于480px*800px的Nexus One和Desire等手機，可以用下面的樣式來匹配：

復(fù)制代碼
代碼如下:

/* for 480px*800px width screen */
@media only screen (device-aspect-ratio:5/3){
selector{
}
}

O’Reilly區(qū)分iPhone和iPad的方法
O’Reilly為其網(wǎng)站制作了針對iPad和iPhone設(shè)備的不同版本，從而提供最適合相關(guān)設(shè)備閱讀的界面，他們的做法就是使用media query：

復(fù)制代碼
代碼如下:

<link rel="stylesheet" media="all and (max-device-width: 480px)" href="iphone.css">
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="ipad-portrait.css">
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="ipad-landscape.css">
<link rel="stylesheet" media="all and (min-device-width: 1025px)" href="ipad-landscape.css">

總結(jié)
CSS 3的media query是一個很強大也很好用的工具，它為我們在不同的設(shè)備和環(huán)境下實現(xiàn)豐富的界面提供了一種快捷方法，雖然現(xiàn)在各個瀏覽器對它的支持還有些差異，但是大家都在改進，IE 9已經(jīng)開始支持media query了。不過目前media query的最大舞臺是在高端手持設(shè)備，相信隨著移動互聯(lián)網(wǎng)的快速發(fā)展，media query也會很好發(fā)揮自己的作用。

相關(guān)文章

  • 前端CSS Grid 布局示例詳解

    CSS Grid 是一種二維布局系統(tǒng)，可以同時控制行和列，相比 Flex（一維布局），更適合用在整體頁面布局或復(fù)雜模塊結(jié)構(gòu)中,這篇文章主要介紹了前端CSS Grid 布局詳解,需要的朋
    2025-04-16

  • CSS Padding 和 Margin 區(qū)別全解析

    CSS 中的 padding 和 margin 是兩個非?；A(chǔ)且重要的屬性，它們用于控制元素周圍的空白區(qū)域，本文將詳細介紹 padding 和 margin 的概念、區(qū)別以及如何在實際項目中使用它們
    2025-04-07

  • CSS will-change 屬性示例詳解

    will-change 是一個 CSS 屬性，用于告訴瀏覽器某個元素在未來可能會發(fā)生哪些變化，本文給大家介紹CSS will-change 屬性詳解，感興趣的朋友一起看看吧
    2025-04-07

  • CSS去除a標簽的下劃線的幾種方法

    本文給大家分享在 CSS 中，去除a標簽（超鏈接）的下劃線的幾種方法，本文給大家介紹的非常詳細，感興趣的朋友一起看看吧
    2025-04-07

  • 前端高級CSS用法示例詳解

    在前端開發(fā)中，CSS（層疊樣式表）不僅是用來控制網(wǎng)頁的外觀和布局，更是實現(xiàn)復(fù)雜交互和動態(tài)效果的關(guān)鍵技術(shù)之一,隨著前端技術(shù)的不斷發(fā)展，CSS的用法也日益豐富和高級,本文將
    2025-04-07

  • css中的 vertical-align與line-height作用詳解

    文章詳細介紹了CSS中的`vertical-align`和`line-height`屬性,包括它們的作用、適用元素、屬性值、常見使用場景、常見問題及解決方案，感興趣的朋友跟隨小編一起看看吧
    2025-03-26

  • 淺析CSS 中z - index屬性的作用及在什么情況下會失效

    z-index屬性用于控制元素的堆疊順序,值越大,元素越顯示在上層,它需要元素具有定位屬性（如relative、absolute、fixed或sticky），本文給大家介紹CSS 中z - index屬性的作用
    2025-03-21

  • CSS @media print 使用詳解

    文章詳細介紹了CSS中的打印媒體查詢@mediaprint包括基本語法、常見使用場景和代碼示例,如隱藏非必要元素、調(diào)整字體和顏色、處理鏈接的URL顯示、分頁控制、調(diào)整邊距和背景等
    2025-03-18

  • CSS模擬 html 的 title 屬性(鼠標懸浮顯示提示文字效果)

    本文介紹了如何使用CSS模擬HTML的title屬性,通過鼠標懸浮顯示提示文字效果,通過設(shè)置`.tipBox`和`.tipBox.tipContent`的樣式,實現(xiàn)了提示內(nèi)容的隱藏和顯示，感興趣的朋友一起
    2025-03-10

  • 前端 CSS 動態(tài)設(shè)置樣式：:class、:style 等技巧(推薦)

    本文介紹了Vue.js中動態(tài)綁定類名和內(nèi)聯(lián)樣式的兩種方法：對象語法和數(shù)組語法,通過對象語法,可以根據(jù)條件動態(tài)切換類名或樣式；通過數(shù)組語法,可以同時綁定多個類名或樣式,此外
    2025-02-26

最新評論