狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

引言

媒體查詢是 CSS3 的一個新的技術，它使我們可以針對不同的設備（或者說，不同的屏幕尺寸和分辨率）來應用不同的樣式。

媒體查詢包含一個媒體類型和至少一個使用寬度、高度、顏色等條件限制的表達式。CSS 用于桌面電腦的屏幕可能在平板電腦、手機、黑白打印機以及非視覺網絡瀏覽器上并不適用。相反，設計師可能要用一種軟件解決方案來滿足既多樣又具有挑戰性的需求。

當您調整瀏覽器窗口的大小，媒體查詢可以使網頁布局動態地改變。這是制作響應式網頁設計的關鍵工具。

示例：

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

  body {

    background-color: lightblue;

  }

}

以上 CSS 代碼表示: 如果瀏覽器窗口的寬度（viewport）等于或小于 600px，那么 body 的背景顏色將變為淺藍色。

一、媒體類型

CSS中的媒體查詢主要有以下媒體類型：

all: 適用于所有設備。

print: 主要用于打印機和打印預覽模式。

screen: 主要用于電腦屏幕、平板、智能手機等。

speech: 適用于基于語音識別的設備。

這幾種媒體類型的主要作用是根據設備的類型來應用不同的樣式規則，使得網站或網頁能在不同設備上有良好的顯示效果。

舉例說明：

@media print {

    body { }

}

@media screen {

    body { font-size: 13px; }

}

@media screen, print {

    body { line-height: 1.2; }

}

上述代碼中，定義了三組 CSS 規則。

第一組是適用于打印機或打印預覽模式的，其所定義的樣式將在打印界面中生效。

第二組是適用于電腦屏幕和智能手機等設備的，其所定義的樣式將在這些設備的顯示界面中生效。

第三組同時適用于屏幕和打印界面，其所定義的樣式在兩種界面都會生效。

二、媒體特性

媒體查詢中的媒體特性主要包括以下幾種：

width and height：這兩個特性主要用于描述設備顯示區域的寬度和高度，可以用來調整不同設備下的網頁布局。例如：

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

    body {

        background-color: lightblue;

    }

}

以上CSS規則表示，當設備的屏幕寬度小于或等于600px時，網頁背景顏色變為淺藍色。

orientation：描述設備的方向，值可以是portrait（豎屏）或landscape（橫屏）。例如：

@media screen and (orientation: portrait) {

    body {

        font-size: 1.2em;

    }

}

以上CSS規則表示，當設備處于豎屏狀態時，網頁字體變為1.2em。

device-width and device-height：這兩個特性用于描述設備的物理尺寸。例如：

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

    body {

        margin: 0 auto;

        width: 1200px;

    }

}

以上CSS規則表示，若設備的物理屏幕寬度大于或等于1200px，網頁主體將居中顯示，并且寬度恒定為1200px。

resolution：描述設備的分辨率。例如：

@media print and (min-resolution: 300dpi) {

    body {

        font-size: 12pt;

    }

}

以上CSS規則表示，如果設備的打印分辨率至少為300 dot per inch，網頁字體變為12pt。

aspect-ratio and device-aspect-ratio：前者描述的是顯示區域的寬高比，后者描述設備物理屏幕的寬高比。例如：

@media screen and (aspect-ratio: 16/9) {

    body {

        background: url('widescreen-bg.jpg');

    }

}

以上CSS規則表示，如果設備的顯示區域的寬高比是16:9，那么網頁背景圖設為widescreen-bg.jpg。

以上就是媒體查詢中常用的媒體特性以及它們的用途。

三、邏輯操作符

在CSS中，媒體查詢使用邏輯操作符來組合不同的媒體類型和條件。以下是常見的邏輯操作符：

and：使用 and 操作符可以同時匹配多個條件。例如：

@media screen and (min-width: 768px) and (max-width: 1024px) {

  /* 這里是一些規則 */

}

上面的代碼表示只有在屏幕寬度在 768px 和 1024px 之間時才會應用這些規則。

or：使用 or 操作符可以匹配其中一個條件。例如：

@media (color) or (color-index) {

  /* 這里是一些規則 */

}

上面的代碼表示只要設備支持顏色或顏色索引，就會應用這些規則。

not：使用 not 操作符可以排除某個條件。例如：

@media not screen {

  /* 這里是一些規則 */

}

上面的代碼表示只有在非屏幕設備上才會應用這些規則。

only：使用only操作符，可以隱藏樣式表不會被舊的瀏覽器應用。這是因為老的瀏覽器不支持媒體查詢，它們會忽略only關鍵字和后面的所有表達，而新的瀏覽器會把它作為普通的媒體查詢來處理。例如：

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

  .sidebar {

    display: block;

  }

}

在這個例子中，只有設備類型為屏幕并且視口的最小寬度為600px時，側邊欄才顯示，并且這個樣式只會被支持媒體查詢的瀏覽器應用。

應用這些操作符，可以讓開發者根據不同的媒體條件來設計多種布局和樣式，實現響應式設計和優化用戶體驗。例如：

在移動端和桌面端顯示不同的導航菜單：

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

  /* 移動端 */

  .menu {

    display: none;

  }

  

  .mobile-menu {

    display: block;

  }

}

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

  /* 桌面端 */

  .menu {

    display: block;

  }

  

  .mobile-menu {

    display: none;

  }

}

在打印時隱藏某些元素：

@media print {

  .print-hidden {

    display: none;

  }

}

根據屏幕大小和朝向應用不同的背景圖像：

@media screen and (orientation: portrait) {

  .bg-image {

    background-image: url(portrait.jpg);

  }

}

@media screen and (orientation: landscape) {

  .bg-image {

    background-image: url(landscape.jpg);

  }

}

四、link方式引入

媒體查詢可以使用link標簽方便地引入：

<link rel="stylesheet" media="(max-width: 768px)" href="example.css">

上述代碼的作用是在瀏覽器視口寬度小于或等于768px時，應用example.css樣式表。

注意事項：

媒體查詢的條件必須包含在media屬性中。基于設備特征的媒體查詢，如空格、冒號和括號等，必須使用引號。

link標簽的href屬性中放置的是具有相關媒體查詢樣式的css樣式表路徑，這個路徑可以是相對路徑或絕對路徑。

瀏覽器無法理解或支持媒體查詢的情況下，會無視media特性并加載樣式表。

在使用的過程中如果有多個css文件，文件多了會影響性能，盡量將多個css文件合并為一個來引入。各個不同的CSS規則會按照不同的設備特性來應用。

使用媒體查詢時一定要確保網站或應用可以在沒有外部CSS文件的情況下正常工作。這樣做將增強功能的穩健性，并優化根據設備特性應用樣式的變化。

注意link標簽的放置位置，一般是放置在head標簽內部。

五、編寫位置及順序

媒體查詢通常放在 CSS 文件的底部，或在每個 CSS 規則集后面，具體取決于邏輯和項目結構。重要的是，它們應該放在相關規則集的附近，使其易于尋找并理解上下文。

媒體查詢的順序也很重要。通常，你應該先進行一般的樣式設置，然后再按照屏幕或設備的大小從小到大進行媒體查詢的設置。這是由于 CSS 的層疊規則，后寫的樣式會覆蓋先寫的樣式。所以當你在屏幕尺寸變大時，需要更改的樣式應該在后面。

例如：

/* 通用樣式 */

body {

  background-color: white;

  color: black;

}

/* 小設備（小于600px） */

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

  body {

    background-color: blue;

  }

}

/* 中等設備（601px至768px） */

@media only screen and (min-width: 601px) and (max-width: 768px) {

  body {

    background-color: green;

  }

}

/* 大設備（769px及以上） */

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

  body {

    background-color: red;

  }

}

在上面的例子中，隨著設備寬度的增大，背景色會從藍色變為綠色，然后變為紅色。這是因為后寫的媒體查詢會覆蓋先寫的媒體查詢。

六、響應閾值設定

媒體查詢的響應斷點的閾值設定通常是基于常見設備的屏幕尺寸進行設定的，但無固定標準，主要看項目需求和目標用戶的設備種類。

以下是一些常見的設備斷點：

小于 768px: 適用于手機及小屏設備。

768px 至 1024px: 適用于平板電腦和小屏電腦設備。

大于 1024px: 適用于大屏電腦和電視等設備。

例如：

/* Extra small devices (phones, 600px and down) */

@media only screen and (max-width: 600px) {...}

/* Small devices (portrait tablets and large phones, 600px and up) */

@media only screen and (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) */

@media only screen and (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) */

@media only screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */

@media only screen and (min-width: 1200px) {...}

在這些閾值下，網頁的布局、字體大小等都可能需要相應地進行調整，以提供最佳的用戶體驗。

然而，僅僅考慮設備尺寸是不夠的，也需要考慮視口尺寸、屏幕解析度、設備方向等多個因素。切忌直接拘泥于某些設備的尺寸，應該考慮的是如何構建能夠靈活適應各種情況的布局。因此有時候，根據設計的具體內容和項目需求來設定斷點可能會更好些。

————————————————

版權聲明：本文為博主原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接和本聲明。

原文鏈接：https://blog.csdn.net/jieyucx/article/details/132047460