關于CSS3中Media Queries使用方法

Miracle 發布于2019-08-28 18:01 / 3260人閱讀

摘要：上面表示的是當屏幕大于或等于時，容器的寬度為。多個媒體特性使用當屏幕在之間時，的背景色渲染為，如下所示。關鍵詞樣式代碼上面代碼表示的是樣式代碼將被使用在除打印設備和設備寬度小于下所有設備中。

Media Queries能在不同的條件下使用不同的樣式，使頁面在不同在終端設備下達到不同的渲染效果

@media 媒體類型and （媒體特性）{你的樣式}

最大寬度max-width

“max-width”是媒體特性中最常用的一個特性，其意思是指媒體類型小于或等于指定的寬度時，樣式生效。如：

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

上面表示的是：當屏幕小于或等于480px時,頁面中的廣告區塊（.ads）都將被隱藏。

最小寬度min-width

“min-width”與“max-width”相反，指的是媒體類型大于或等于指定寬度時，樣式生效。

@media screen and (min-width:900px){
.wrapper{width: 980px;}
}

上面表示的是：當屏幕大于或等于900px時，容器“.wrapper”的寬度為980px。

多個媒體特性使用

當屏幕在600px~900px之間時，body的背景色渲染為“#f5f5f5”，如下所示。

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

設備屏幕的輸出寬度Device Width

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

上面的代碼指的是“iphone.css”樣式適用于最大設備寬度為480px，比如說iPhone上的顯示，這里的“max-device-width”所指的是設備的實際分辨率，也就是指可視面積分辨率。

not關鍵詞

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

上面代碼表示的是：樣式代碼將被使用在除打印設備和設備寬度小于1200px下所有設備中。

only關鍵詞

GPU云服務器云服務器 queries 關于jdk的使用關于宏的使用關于使用linux的相關軟件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/110959.html

響應式web設計--媒體查詢

摘要：媒體查詢的用法媒體查詢包含一個可選的媒體類型和，滿足規范的條件下，包含零個或多個表達式，這些表達式描述了媒體特征，最終會被解析為或。還有一個與眾不同的是，在其他瀏覽器中不要像其他屬性一樣在不同的瀏覽器中添加前綴。媒體查詢的用法 media 媒體查詢包含一個可選的媒體類型和，滿足CSS3規范的條件下，包含零個或多個表達式，這些表達式描述了媒體特征，最終會被解析為true或false。如...

Eric 2019-08-29 16:07 評論0 收藏0
響應式web設計--媒體查詢

摘要：媒體查詢的用法媒體查詢包含一個可選的媒體類型和，滿足規范的條件下，包含零個或多個表達式，這些表達式描述了媒體特征，最終會被解析為或。還有一個與眾不同的是，在其他瀏覽器中不要像其他屬性一樣在不同的瀏覽器中添加前綴。媒體查詢的用法 media 媒體查詢包含一個可選的媒體類型和，滿足CSS3規范的條件下，包含零個或多個表達式，這些表達式描述了媒體特征，最終會被解析為true或false。如...

Salamander 2019-08-02 11:00 評論0 收藏0
花式使用CSS3 transition

摘要：歡迎交換友鏈進擊的程序媛微博江小湖本文講介紹控制六種方法觸發，以及事件的使用。事件事件會在結束后觸發。有沒有漸變開始的事件目前只有有事件，目前未有此標準。歡迎交換友鏈 Lakers Blog--進擊的程序媛Github：https://github.com/younglaker微博: 江小湖Laker 本文講介紹:hover、:active、:focus、:checked、Media...

DobbyKim 2019-08-19 17:17 評論0 收藏0
css:Media Queries: How to target desktop, tablet a

摘要：涂聚文涂聚文 Media Queries: How to target desktop, tablet and mobile? /* Media Queries: How to target desktop, tablet and mobile? http://webdesignerwall.com/tutorials/css3-media-queries https:/...

fevin 2019-04-23 13:28 評論0 收藏0