@media和@import媒體查詢hack

最後更新：2015-12-11 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：

http://css.doyoe.com/

@media和@import媒體查詢hack

媒體查詢可以被用在CSS中的@media和@import規則上，也可以被用在HTML和XML中。

例如：

@media screen and (width:800px){ … }

@import url(example.css) screen and (width:800px);

<?xml-stylesheet media="screen and (width:800px)" rel="stylesheet" href="example.css" ?>

文法：

@media：<media_query_list>

<media_query_list>：[<media_query>[‘,‘ <media_query>]*]?

多個用逗號隔開@media (not (screen and (color))), print and (color)

<media_query>：[only | not]? <media_type> [and <expression>]* | <expression> [and <expression>]*

<expression>：‘(‘<media_feature>[:<value>]?‘)‘

Only ：僅僅，只針對 not：否，不針對

/* 只支援IE6、7 */ @media screen\9 {...}

/* 只支援IE8 */ @media \0screen {...}

/* 只支援IE6、7、8 */ @media \0screen\,screen\9 {...}

/* 只支援IE8、9、10 */ @media screen\0 {...}

/* 只支援IE9、10 */ @media screen and (min-width:0\0) {...}

/* 只支援IE10 */

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {...}

/* 支援IE9、Chrome、Safari、Firefox、 Opera */

@media all and (min-width:0){...}

/* 只支援wekit核心瀏覽器Chrome、Safari */

@media screen and (-webkit-min-device-pixel-ratio: 0) {...}

@-moz-document url-prefix() {

/* 在Firefox中文本顏色為品紅色 */

.class{color:#F0F;}

}

</style>

/*---------------------------------媒體查詢hack ]]---------------------------------*/

/*---------------------------------選取器hack [[---------------------------------*/

/* 只支援IE7 */

html* 選取器{}

/* 僅支援IE7 使用該選取器需要HTML頂部有聲明：<!DOCTYPE HTML ......>*/

*+html 選取器{}

/* 只支援IE6 */

*html 選取器{}

如:

<p class="class">選取器hack選取器hack選取器hack選取器hack選取器hack選取器hack</p>

html* .class{color:#F00;} /* 在IE7中文本顏色為紅色 */

*+html .class{color:#0F0;} /* 在IE7中文本顏色為綠色 */

*html .class{color:#00F;} /* 在IE6中文本顏色為藍色 */

/*---------------------------------選取器 hack ]]---------------------------------*/

/*---------------------------------屬性hack [[---------------------------------*/

/* 只支援IE6、7、8、9、10 */

選取器{屬性：屬性值\9;}

/* 只支援IE8、9、10 */

選取器{屬性：屬性值\0;}

/* 支援IE8的部分屬性值、完全支援IE9、10 */

選取器{屬性：屬性值\9\0;}

/* 僅支援IE7和IE6 */

選取器{*屬性：屬性值;}

/* 只支援IE6 */

選取器{_屬性：屬性值;}

/* 只不支援IE6 */

選取器{屬性：屬性值!important;}

/* 僅支援Safari和Chrome ，且只能放在選取器的最後一個屬性，因為當瀏覽器解析[;;]後，不會再讀取後面屬性 */

選取器{[;屬性:屬性值;]}

如：

<p class="class">屬性hack屬性hack屬性hack屬性hack屬性hack屬性hack</p>

color:#F00\0;/* 在IE8和IE9中文本顏色為紅色 */

*color:#0F0; /* 在IE7中文本顏色為綠色 */

_color:#00F; /* IE6中顏色為藍色 */

[;color:#F0F;]/* 在Safari和Chrome中顏色為品紅色 */

}

</style>

/* 只支援Opera */

@media all and (-webkit-min-device-pixel-ratio: 10000), not all and (-webkit-min-device-pixel-ratio: 0) {...}

/* 只支援Firefox */ @-moz-document url-prefix() {...}

如：

<p class="class">@[email protected]@[email protected]@[email protected]</p>
<style type="text/css">
@media all and (min-width:0){

/* 在IE9文本顏色為紅色*/

.class{color:#F00;}

}

@media screen and (-webkit-min-device-pixel-ratio: 0) {

/* 在Chrome、Safari中文本顏色為綠色 */

.class{color:#0F0;}

}

@media all and (-webkit-min-device-pixel-ratio: 10000), not all and (-webkit-min-device-pixel-ratio: 0) {

/* 在Opera中文本顏色為藍色 */

.class{color:#00F;}

}

@media和@import媒體查詢hack

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More