媒體查詢@media的使用

Ververica 發布于2019-08-29 13:12 / 2255人閱讀

摘要：媒體查詢參考一個媒體查詢由一個可選的媒體類型和零個或多個使用媒體功能的限制了樣式表范圍的表達式組成，例如寬度高度和顏色。媒體查詢，添加自，允許內容的呈現針對一個特定范圍的輸出設備而進行裁剪，而不必改變內容本身。

媒體查詢

參考：https://developer.mozilla.org...
一個媒體查詢由一個可選的媒體類型和零個或多個使用媒體功能的限制了樣式表范圍的表達式組成，例如寬度、高度和顏色。媒體查詢，添加自CSS3，允許內容的呈現針對一個特定范圍的輸出設備而進行裁剪，而不必改變內容本身。

基本使用

具體的使用方式是

媒體查詢包含一個可選的媒體類型和，滿足CSS3規范的條件下，包含零個或多個表達式，這些表達式描述了媒體特征，最終會被解析為true或false。如果媒體查詢中指定的媒體類型匹配展示文檔所使用的設備類型，并且所有的表達式的值都是true，那么該媒體查詢的結果為true.那么媒體查詢內的樣式將會生效，

語法邏輯

主要的邏輯也就是以下四個：

and

, [也就是 or 的邏輯]

not 【對查詢結果取反】

only 【only操作符僅在媒體查詢匹配成功的情況下被用于應用一個樣式，這對于防止讓選中的樣式在老式瀏覽器中被應用到。】

媒體特點

大多數媒體屬性可以帶有“min-”或“max-”前綴，用于表達“最低...”或者“最高...”。例如，max-width:12450px表示應用其所包含樣式的條件最高是寬度為12450px，大于12450px則不滿足條件，不會應用此樣式。這避免了使用與HTML和XML沖突的“<”和“>”字符。如果你未向媒體屬性指定一個值，并且該特性的實際值不為零，則該表達式被解析為真。
顏色（color）
顏色索引（color-index）
寬高比（aspect-ratio）
設備寬高比（device-aspect-ratio）
設備高度（device-height）
設備寬度（device-width）
網格（grid）
高度（height）
黑白（monochrome）
方向（orientation）
分辨率（resolution）
掃描（scan）
寬度（width）
-moz-images-in-menus
-moz-mac-graphite-theme
-moz-maemo-classic
-moz-device-pixel-ratio
-moz-os-version
-moz-scrollbar-end-backward
-moz-scrollbar-end-forward
-moz-scrollbar-start-backward
-moz-scrollbar-start-forward
-moz-scrollbar-thumb-proportional
-moz-touch-enabled
-moz-windows-classic
-moz-windows-compositor
-moz-windows-default-theme
-moz-windows-theme

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

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

詳解css媒體查詢

摘要：媒體查詢，添加自，允許內容的呈現針對一個特定范圍的輸出設備而進行裁剪，而不必改變內容本身。而且瀏覽器也不會根據媒體查詢來動態的加載樣式，它只是一股腦的將所有的樣式引入。簡介媒體查詢(Media Queries)早在在css2時代就存在,經過css3的洗禮后變得更加強大bootstrap的響應式特性就是從此而來的. 簡單的來講媒體查詢是一種用于修飾css何時起作用的語法. Media...

leone 2019-08-02 11:54 評論0 收藏0
詳解css媒體查詢

摘要：媒體查詢，添加自，允許內容的呈現針對一個特定范圍的輸出設備而進行裁剪，而不必改變內容本身。而且瀏覽器也不會根據媒體查詢來動態的加載樣式，它只是一股腦的將所有的樣式引入。簡介媒體查詢(Media Queries)早在在css2時代就存在,經過css3的洗禮后變得更加強大bootstrap的響應式特性就是從此而來的. 簡單的來講媒體查詢是一種用于修飾css何時起作用的語法. Media...

ymyang 2019-08-29 17:09 評論0 收藏0
詳解css媒體查詢

摘要：媒體查詢，添加自，允許內容的呈現針對一個特定范圍的輸出設備而進行裁剪，而不必改變內容本身。而且瀏覽器也不會根據媒體查詢來動態的加載樣式，它只是一股腦的將所有的樣式引入。簡介媒體查詢(Media Queries)早在在css2時代就存在,經過css3的洗禮后變得更加強大bootstrap的響應式特性就是從此而來的. 簡單的來講媒體查詢是一種用于修飾css何時起作用的語法. Media...

gotham 2019-08-23 12:42 評論0 收藏0
Sass Mixin 和 Media Merging

摘要：一些瀏覽器支持嵌套媒體查詢，例如，和但是和目前并沒有支持嵌套媒體查詢。因此，一方面，我們有一個斷點管理器從斷點的全局中選擇并處理錯誤消息，另一方面有一個斷點管理器允許使用多查詢條件。如果你對 Sass不太熟悉的話，你可能不知道Sass增加了許多非常有趣的功能，例如媒體查詢（即 @media）功能（經常被成為 Media Merging媒體合并）。 showImg(https://se...

Cciradih 2019-08-20 11:57 評論0 收藏0