@media 媒體查詢

GraphQuery 發布于2019-04-23 13:12 / 1925人閱讀

摘要：當視口寬度小于等于時生效相當于當視口寬度大于等于時生效相當于當視口寬度介于和之間時生效大于等于多少，小于等于多少的寫法。舉例起初，背景色是逐漸縮小視口到，繼續縮小，背景色變為繼續縮小至，變為。

@media screen and (max-width: 300px) {

? ? //當視口寬度小于等于300px時生效

}

max-width? 相當于? <=?

@media screen and (min-width: 300px) {

? ? //當視口寬度大于等于300px時生效

}

max-width? 相當于? >=?

@media screen and (min-windth:300px) and (max-width:600px) {

? ? //當視口寬度介于300px 和 600px 之間時生效

}

大于等于多少，小于等于多少的寫法。

舉例：

body{
? ? background: orange;
}
@media screen and (max-width:1200px) {
? ? body{
? ? ? ? background: green;
? ? }
}
@media screen and (max-width:1000px) {
? ? body{
? ? ? ? background: blue;
? ? }
}

起初，背景色是orange；

逐漸縮小視口到1200px，繼續縮小，背景色變為green；

繼續縮小至1000px，變為 blue。

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

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/1557.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