css3之Media Queries 媒體查詢

時間 2019-12-12

標籤 css3 css media queries 媒體查詢欄目 CSS 简体版

原文原文鏈接

1、初步瞭解css

Media Queries是CSS3新增長的一個模塊功能，其最大的特色就是經過css3來查詢媒體，而後調用對應的樣式。android

瞭解Media Queries以前須要瞭解媒體類型以及媒體特性：css3

能夠經過媒體類型（Media Type）對不一樣的設備指定不一樣的樣式，W3C總共列出了10種媒體類型瀏覽器

2、媒體類型的引用方法有3種app

link方法

就是在<link>標籤引用樣式的時候，經過link標籤中的media屬性來指定不一樣的媒體類型。以下：iphone

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

@import方法

@import能夠引用樣式文件，一樣也能夠用來引用媒體類型。@import引入媒體類型主要有兩種方式。url

①經過@import調用另外一個樣式文件spa

@importurl(reset.css) screen;
@importurl(print.css) print;

②在<head></head>標籤中的<style></style>中引入，但這種方法IE6-7不支持3d

<head>
<style type="text/css">
    @importurl(style.css) screen;
</style>
</head>

@media方法

@media是css3中新引進的一個特性，被稱爲媒體查詢。在頁面中也能夠經過這個屬性來引入媒體類型。@media引入媒體類型也有兩種方式blog

①在樣式文件中引用媒體類型

@media screen {
   選擇器{/*你的樣式代碼寫在這裏…*/}
}

②使用@media引入媒體類型的方式是在<head></head>標籤中的<style>中使用

<head>
<style type="text/css">
    @media screen{
    選擇器{/*你的樣式代碼寫在這裏…*/}
}
</style>
</head>

3、Media Queries使用方法

前面簡單的介紹了Media Queries如何引用到項目中，但Media Queries有其本身的使用規則。具體來講,Media Queries的使用方法以下。

@media 媒體類型 and (媒體特性){樣式}

媒體特性是經過min/max來表示大於等於或小於作爲邏輯判斷，而不是使用小於（<）和大於（>）這樣的符號來判斷。

①最大寬度max-width

意思是指媒體類型小於或等於指定寬度時，樣式生效：

/*當屏幕小於或等於480px時，.ads將隱藏 */

@media screen and (max-width:480px){
 .ads {
   display:none;
  }
}

②最小寬度min-width

指媒體類型大於或等於指定寬度時，樣式生效

/* 當屏幕大於或等於900px時，容器「.wrapper」 的寬度爲980px*/
@media screen and (min-width:900px){
.wrapper{width: 980px;}
}

③多個媒體特性使用

Media Queries可使用關鍵詞"and"將多個媒體特性結合在一塊兒。

/* 當屏幕在600px~900px之間時，body的背景色爲#000 */

@media screen and (min-width:600px) and (max-width:900px){
  body {background-color:#000;}
}

④設備屏幕的輸出寬度

在智能設備上，例如iPhone、iPad等，還能夠根據屏幕設備的尺寸來設置相應的樣式（或者調用相應的樣式文件）。一樣的，對於屏幕設備一樣可使用「min/max」對應參數，如「min-device-width」或者「max-device-width」。

<link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />

上面的代碼指的是「iphone.css」樣式適用於最大設備寬度爲480px，這裏的max-device-width 所指的是設備實際的分辨率，也就是可視面積分辨率。

⑤not關鍵詞

使用關鍵詞「not」使用來排除某種特定的媒體類型。

@media not print and (max-width: 1200px){樣式代碼}

上面表示樣式代碼將做用在除print打印設備和設備小於或等於1200px的全部設備中

⑥only關鍵詞

only用來指定某種特定的媒體類型，能夠用來排除不支持媒體查詢的瀏覽器。在Media Query中若是沒有明確指定Media Type，那麼其默認爲all　

<linkrel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" />

另外在樣式中，還可使用多條語句來將同一個樣式應用於不一樣的媒體類型和媒體特性中，以下所示：

<linkrel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。