Media Queries詳解

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

上載者：User

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

標籤：

iPhone4

Pad

android

/*240px的寬度*/
<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />
/*360px的寬度*/
<link rel="stylesheet" media="only screen and (min-device-width:241px) and (max-device-width:360px)" href="android360.css" type="text/css" />
/*480px的寬度*/
<link rel="stylesheet" media="only screen and (min-device-width:361px) and (max-device-width:480px)" href="android480.css" type="text/css" />
我們可以使用media query為android手機在不同解析度提供特定樣式，這樣就可以解決螢幕解析度的不同給android手機的頁面重構問題。

not關鍵字

only關鍵字

only用來定某種特定的媒體類型，可以用來排除不支援媒體查詢的瀏覽器。其實only很多時候是用來對那些不支援Media Query但卻支援Media Type的裝置隱藏樣式表的。

其主要有：支援媒體特性（Media Queries）的裝置，正常調用樣式，此時就當only不存在；對於不支援媒體特性(Media Queries)但又支援媒體類型(Media Type)的裝置，這樣就會不讀了樣式，
因為其先讀only而不是screen；另外不支援Media Qqueries的瀏覽器，不論是否支援only，樣式都不會被採用。

其他

在Media Query中如果沒有明確指定Media Type，那麼其預設為all，如：
<link rel="stylesheet" media="(min-width: 701px) and (max-width: 900px)" href="medium.css" type="text/css" />
另外還有使用逗號（，）被用來表示並列或者表示或，如下
<link rel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />
上面代碼中style.css樣式被用在寬度小於或等於480px的手持功能上，或者被用於螢幕寬度大於或等於960px的裝置上。

裝置螢幕的輸出寬度Device Width

多個Media Queries使用

一、最大寬度Max Width

@media引入

這種引入方式和@import是一樣的，也有兩種方式：

樣式檔案中使用：

@media screen{
選取器{
屬性：屬性值；
}
}

在<head>>/head>中的<style>…</style>中調用：

<head>
<style type="text/css">
@media screen{
選取器{
屬性：屬性值；
}
}
</style>
</head>

@import方式引入

@import引入有兩種方式，一種是在樣式檔案中通過@import調用別一個樣式檔案；另一種方法是在<head></head>中的<style>…</style>中引入，單這種使用方法在ie6-7都不被支援如

樣式檔案中調用另一個樣式檔案：

@import url("css/reset.css") screen;
@import url("css/print.css") print;

在<head></head>中的<style>…</style>中調用：

<head>
<style type="text/css">
@import url("css/style.css") all;
</style>
</head>

xml方式引入

<?xml-stylesheet rel="stylesheet" media="screen" href="css/style.css" ？>

link方法引入

<link rel="stylesheet" type="text/css" href="../css/print.css" media="print" />

Media Queries詳解

本文章原先以中文撰寫並發佈於 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