CSS3媒體查詢media_queries響應式佈局入門指南知識點總結

時間 2021-08-12

標籤 css html css3 segmentfault 瀏覽器 dom 佈局性能字體欄目 CSS 简体版

原文原文鏈接

什麼是媒體查詢

咱們知道，咱們給網頁HTML寫樣式用的主要是CSS（層疊樣式表）語言的規則，好比：盒模型設置寬高背景色什麼的。css

目前咱們使用的最新版本的層疊樣式表主要是CSS第三版，也就是CSS3，CSS3帶來的新特性、新功能有不少，好比：圓角效果、圖形化邊界、塊陰影與文字陰影、使用RGBA實現透明效果、漸變效果、使用@Font-Face實現定製字體、媒體查詢等等。html

因此，什麼是媒體查詢呢？
媒體查詢就是CSS3帶來的新的功能特性css3

通常認爲媒體查詢是CSS3的新增內容，實際上CSS2就已經有媒體查詢了，只不過css3又增長了新功能使其更增強大，從而讓媒體查詢發揚光大

媒體查詢的功能

功能就是：segmentfault

CSS3中新特性媒體查詢（mediaqueries），可爲根據不一樣的分辨率（設備）設置不一樣的樣式效果瀏覽器

以前css2中定義的設備有tv設備、tty設備、屏幕screen設備、打印機print設備等等。到css3中基本上廢棄了不少用不到的設備，基本上只保留screen設備、print設備這樣的。print設置偶爾使用，比較經常使用的就是screen設備。dom

print設備咱們能夠經過Ctrl+P快捷鍵預覽一下打印的效果佈局

簡而言之，媒體查詢主要是用來作響應式佈局的性能

什麼是響應式佈局

響應式佈局就是：
咱們作好的頁面，在不一樣尺寸的屏幕上有不一樣的樣式效果回饋。好比，在大屏幕上咱們須要更多的展現信息，畢竟屏幕大嘛，信息展現少了就浪費了。在小屏幕上，咱們須要隱藏一些東西，由於屏幕過小了，信息展現多了反而顯得過於臃腫。不一樣屏幕有不一樣的相應，即爲響應式佈局字體

好比有這樣一個需求：在可視區域屏幕的寬度小於480像素時，咱們讓屏幕中文字由原來的黑色black變成綠色green。（默認是黑色）ui

使用js解決

思路：經過screen對象，獲取屏幕分辨率的寬度width，進行判斷，若小於480的時候，就改變文字的顏色。

打印screen對象的信息

Screen對象能夠獲取瀏覽器窗口的相關數據，好比分辨率、屏幕大小之類的數據，能夠經過window.screen獲取到，同時Screen也自帶一些方法能夠作其餘事情，好比解鎖或鎖定屏幕轉向等。具體關於screen對象的詳細信息，歡迎訪問MDN官方網址： https://developer.mozilla.org...

對應代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="meiti">哈嘍，我是媒體查詢</div>
    <script>
        window.onresize = () => {
            console.log(screen.width); // 打印看看screen對象信息
            // 經過js去控制
            if (screen.width <= 480) { 
                document.querySelector('div').style.color = "green"
                document.querySelector('div').style.fontWeight = "bolder"
            } else {
                document.querySelector('div').style.color = "black"
                document.querySelector('div').style.fontWeight = "normal"
            }
        }
    </script>
</body>
</html>

效果圖

使用媒體查詢解決

代碼

<style>
        /* 使用媒體查詢，去設置樣式更加方便 */
        @media screen and (max-width: 480px) {
            div {
                color: green;
                font-weight: bolder;
            }
        }
    </style>

當，是屏幕設備，而且，最大寬度不超過480px的時候，讓文字的顏色變成綠色加粗字體
max-width最大寬度，也就是小於等於的時候
min-width最小寬度，也就是大於等於的時候

效果圖和上圖同樣的，就再也不附圖了。

兩者對比

經過上述的例子，咱們發現的確是媒體查詢在書寫的過程當中更加方便，一方面js要儘可能少操做dom，儘可能減小回流重繪，在一個經過css控制樣式的確是比經過js操做樣式更加節省性能。因此綜上所述，css3帶來的新特性，媒體查詢的確是有必定的應用場景

媒體查詢語法

媒體設備類型

直接寫在style標籤裏面，目前比較經常使用的是四種設備，實際上是三種，以下：

<!-- 指定屏幕設備 -->
<style media="screen"></style>
<!-- 指定打印機設備 -->
<style media="print"></style>
<!-- 指定屏幕閱讀器設備 -->
<style media="speech"></style>
<!-- 指定全部設備，至關於公共的樣式了 -->
<style media="all"></style>

引入的話，也能夠經過重置樣式表引入，以下：

<!-- 指定屏幕設備 -->
<link rel="stylesheet" href="css/style.css" media="screen">
<!-- 指定打印機設備 -->
<link rel="stylesheet" href="css/style.css" media="print">
等 ......

還能夠經過@import引入並指定媒體插敘語法，以下：

<!-- 當屏幕的寬度大於360px的時候，就使用 one.css 文件裏面所書寫的樣式 -->
@import url(./one.css) (min-width:360px);
<!-- 當屏幕的小於880px的時候，就使用 two.css 文件裏面所書寫的樣式 -->
@import url(./two.css) (max-width:880px);

邏輯運算符之三個關鍵字and 、not和only

and關鍵字（且）

and表示而且的意思，須要同時知足 and前和and後的兩個條件，纔會執行對應的媒體查詢語句，好比：
@media screen and (max-width: 480px) { 相應css語句 }

意思以下：

@media
- 表示：使用媒體查詢
screen
- 表示：屏幕設備（好比電腦手機什麼的），也能夠不寫，不寫的話，默認就是屏幕screen 設備，不寫screen 語法以下：
- @media (max-width: 480px) { 相應css語句 } 效果是同樣的，只不過省去默認值罷了
and
- 表示：且的意思，and後面通常會跟限定條件，表示在什麼條件下才會觸發相應的媒體查詢的樣式。能夠寫多個and，表示多個條件的意思，舉例子
- @media screen and (max-width: 480px) and (min-width: 360px) { 相應css語句 }
- 上述案例的意思是：當爲屏幕設備的時候，且屏幕寬度大於360像素，小於480像素的時候，執行相應的css語句
(max-width: 480px)
- 條件的話用括號來包裹，括號裏寫上相應的條件語句，這裏的意思是最大寬度不能超過480px，也就是小於等於的意思
{ 相應css語句 }
- 實現對應樣式效果的語句

not關鍵字（非）

not關鍵字就是取反的意思，要放在@media後面，其餘的語句前面，以下案例：

<style>
    /* 小於等於360px的變成綠色加粗字體 */
    /* @media screen and (max-width: 360px) {  */

    /* 加上not取反就是表示 就變成大於360px的變成綠色加粗字體了 */
    @media not screen and (max-width: 360px) { 
        div {
            color: green;
            font-weight: bolder;
        }
    }
</style>

only關鍵字（僅）

支持媒體查詢語法就使用對應媒體查詢語法，不支持就忽略。以下：
@media only screen and (max-width: 360px) { css語句 }
這種寫法使用不多，畢竟目前只有低版本瀏覽器纔不支持，圖示一下，相應瀏覽器從何時開始支持的

由上圖咱們能夠看到，的確是比較低版本的瀏覽器纔不支持，谷歌瀏覽器21版本，這個是不少年之前的版本了......

補充（或）關鍵字（使用逗號 , 隔開便可）

若是咱們有這樣的一個需求：當屏幕的寬度小於360px或者屏幕的寬度大於480px的時候，才讓字體變成綠色加粗樣式

此時，咱們就須要使用或的語法，代碼以下：

<style>
    @media 
        screen and (max-width: 360px) ,  /* 多個或的條件使用逗號隔開就好了 */
        screen and (min-width: 480px) {
            div {
                color: green;
                font-weight: bolder;
            }
        }
</style>

完整語法

@media  not或only或不寫  mediatype或不寫（不寫就默認screen）  and  ( mediafeature媒體特性  ) {
   相應css語句
}

媒體特性就是限制條件，在什麼條件下，才使用相應的書寫的css語句

經常使用的媒體特性

max-height
- 最大高度，即小於等於這個高度的意思
min-height
- 最小高度，即大於等於這個高度的意思
max-width
- 最大寬度，即小於等於這個寬度的意思
min-width
- 最小寬度，即大於等於這個寬度的意思

媒體特性其實有不少，具體的使用什麼特性根據項目實際狀況。最後再附上官方的媒體查詢網址

附錄官網

W3school的媒體查詢： https://www.w3school.com.cn/c...
MDN的媒體查詢： https://developer.mozilla.org...

相關標籤/搜索

每日一句

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