css 媒體查詢

SS 媒體查詢是一種功能強大的技術(shù)手段，它可以根據(jù)不同的設(shè)備屬性（例如視口寬度、屏幕比例、設(shè)備方向等）來應(yīng)用不同的樣式。這種技術(shù)在構(gòu)建響應(yīng)式和自適應(yīng)設(shè)計方面具有巨大的優(yōu)勢，它能夠確保您的網(wǎng)站在各種類型的設(shè)備上都呈現(xiàn)出良好的視覺效果。

基本語法

媒體查詢的基本語法如下：

@media not|only mediatype and (expressions) {
  CSS-Code;
}

not：表示不匹配指定的媒體類型。
only：表示只匹配指定的媒體類型，這可以避免老舊瀏覽器執(zhí)行不必要的樣式表下載。
mediatype：指的是媒體類型，如 screen、print 等。
expressions：是一系列的媒體特性表達式，用來定義媒體查詢的具體條件。

示例

一個簡單的媒體查詢示例：

/* 默認樣式 */
body {
  background-color: lightblue;
}

/* 當視口寬度小于600px時，改變背景顏色 */
@media screen and (max-width: 600px) {
  body {
    background-color: lightgreen;
  }
}

常見的媒體特性

一些常用的媒體特性包括：

width：視口的寬度。
height：視口的高度。
orientation：設(shè)備的方向（portrait 或 landscape）。
aspect-ratio：視口的寬高比。
device-pixel-ratio：設(shè)備的像素比率。
hover：設(shè)備是否支持懸停操作。
pointer：設(shè)備的指針精度。

我們可以針對手機、平板和電腦屏幕進行適配。

手機 - 通常屏幕寬度在 320px 到 480px 之間。
平板 - 屏幕寬度一般在 600px 到 1024px 之間。
電腦 - 屏幕寬度通常大于 1024px。

下面是針對這些設(shè)備的一個簡單響應(yīng)式布局示例。我們將使用一個簡單的兩欄布局，其中包含一個主要內(nèi)容區(qū)域和一個側(cè)邊欄。側(cè)邊欄在手機屏幕上會被隱藏，在平板屏幕上會顯示為下方的內(nèi)容塊，在電腦屏幕上則會顯示為右側(cè)的側(cè)邊欄。

HTML 結(jié)構(gòu)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Layout Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <h1>Responsive Design Example</h1>
  </header>
  <div class="container">
    <main>
      <article>
        <h2>Main Content</h2>
        <p>This is the main content area. It will always be visible regardless of the device.</p>
      </article>
    </main>
    <aside>
      <h2>Sidebar</h2>
      <p>This is the sidebar with additional information. Its visibility and position will change based on the device type.</p>
    </aside>
  </div>
  <footer>
    <p>Footer Content</p>
  </footer>
</body>
</html>

CSS 樣式

/* 全局樣式 */
body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #f4f4f4;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

header, footer {
  background: #555;
  color: #fff;
  text-align: center;
  padding: 10px 0;
}

header h1, footer p {
  margin: 0;
}

main, aside {
  background: #fff;
  padding: 20px;
  margin-bottom: 20px;
}

/* 手機屏幕 */
@media (max-width: 480px) {
  aside {
    display: none; /* 隱藏側(cè)邊欄 */
  }
}

/* 平板屏幕 */
@media (min-width: 481px) and (max-width: 1024px) {
  aside {
    display: block; /* 顯示側(cè)邊欄 */
    width: 100%; /* 側(cè)邊欄占據(jù)全寬 */
    margin-top: 20px; /* 添加頂部間距 */
  }
}

/* 電腦屏幕 */
@media (min-width: 1025px) {
  .container {
    display: flex;
    justify-content: space-between;
  }

  main {
    flex: 2; /* 主要內(nèi)容占據(jù)2/3的寬度 */
  }

  aside {
    flex: 1; /* 側(cè)邊欄占據(jù)1/3的寬度 */
  }
}

解釋

全局樣式：設(shè)置基本的字體、顏色、間距等。
手機屏幕：當屏幕寬度小于或等于 480px 時，側(cè)邊欄將被隱藏。
平板屏幕：當屏幕寬度介于 481px 和 1024px 之間時，側(cè)邊欄將顯示，并占據(jù)整個寬度，位于主要內(nèi)容下方。
電腦屏幕：當屏幕寬度大于 1024px 時，主內(nèi)容區(qū)和側(cè)邊欄將并排顯示，主內(nèi)容區(qū)占據(jù)2/3的寬度，側(cè)邊欄占據(jù)1/3的寬度。

近，Chrome團隊發(fā)布了對一個新的CSS規(guī)范的實驗性支持，即樣式查詢。簡而言之，它讓我們查詢?nèi)萜鞯臉邮剑皇侵徊樵兂叽纭Ｔ诓樵內(nèi)萜鞒叽绮粔虻那闆r下，這可能很有幫助。

CSS 容器查詢

介紹樣式查詢之前，我們先來回顧容器查詢。

CSS 容器查詢（Container Queries）是一項新的 CSS 功能，允許開發(fā)人員根據(jù)元素的大小來應(yīng)用樣式。這意味著，開發(fā)人員可以為不同大小的設(shè)備或瀏覽器窗口應(yīng)用不同的樣式，而無需使用媒體查詢或使用 JavaScript 來檢測設(shè)備大小。

我們來看看一個例子：

.o-grid__item {
  container-type: inline-size;
}

.c-article {
  /* The default style */
}

@container (min-width: 400px) {
  .c-article {
    /* The styles that will make the article horizontal**
 ** instead of a card style.. */
  }
}

首先，我們需要在定義 container-type。然后，使用 @container開始查詢。一旦滿足了這個條件，CSS將應(yīng)用于該容器內(nèi)的組件。

樣式查詢

簡單地說，樣式查詢讓我們查詢一個容器的CSS屬性或CSS變量。

樣式查詢?nèi)匀皇窃囼炐缘模壳爸辉贑hrome Canary中實現(xiàn)。要測試它們，請進入chrome://flags并激活 "Experimental Web Platform features"的切換。

例如，我們可以檢查容器是否有 display: flex，并在此基礎(chǔ)上為子元素設(shè)計樣式。

.page-header {
  display: flex;
}

@container style(display: flex) {
  .page-header__start {
    flex: 1;
    display: flex;
    align-items: center;
    border-right: 1px solid lightgrey;
  }
}

理想情況下，上述做法應(yīng)該是可行的，但目前Chrome Canary中的樣式查詢原型僅局限于CSS變量。樣式查詢預(yù)計將在Chrome M111中出現(xiàn)。

現(xiàn)在，我們可以檢查變量--boxed: true是否被添加到容器中，如果是，我們可以在此基礎(chǔ)上改變子元素的樣式。

請看下圖:

請注意，容器查詢和樣式查詢的主要區(qū)別在于，前者是針對大小的查詢，后者是針對樣式的查詢。

.card-container {
  --boxed: true;
}

@container style(--boxed: true) {
  .card {
    /* boxed styles */
  }
}

問題

在探討我們可以在哪里使用樣式查詢之前，我們先來回答大家常見的一個問題：樣式查詢能解決什么問題？容器查詢還不夠嗎？

這是一個好問題。在容器查詢中，我們可以根據(jù)一個組件的父級寬度來控制它的樣式，這非常有用。不過，在某些情況下，我們可能不需要查詢尺寸，而是想查詢一個容器的計算樣式。

為了讓你有更好的了解，請看下圖：

這是一篇來自CMS的文章正文。我們有一個默認的圖片樣式和另一個看起來有特色的樣式。

下面是對應(yīng)的代碼：

<figure>
  <img src="cheesecake.jpg" alt="" />
  <figcaption>....</figcaption>
</figure>

figcaption {
  font-size: 13px;
  padding: 4px 8px;
  background: lightgrey;
}

當我們開始對特色的進行造型時，我們需要覆蓋上述內(nèi)容，并有一個CSS類，我們可以用它進行造型。

.featured-figure {
  display: flex;
  flex-wrap: wrap;
}

.featured-figure figcaption {
  font-size: 16px;
  padding: 16px;
  border-left: 3px solid;
  margin-left: -6rem;
  align-self: center;
}

當我們開始為突出顯示的元素添加樣式時，我們需要覆蓋上述樣式并定義一個 CSS 類，以便可以對其進行樣式設(shè)置。

.featured-figure {
  display: flex;
  flex-wrap: wrap;
}

.featured-figure figcaption {
  font-size: 16px;
  padding: 16px;
  border-left: 3px solid;
  margin-left: -6rem;
  align-self: center;
}

很酷，這個方法行。我們能不能做得更好？是的！使用樣式查詢，我們可以在 figure 中添加 display: flex 或一個 CSS 變量 --featured: true，然后基于這個進行樣式設(shè)置。

<figure>
  <img src="cheesecake.jpg" alt="" />
  <figcaption>....</figcaption>
</figure>

figure {
  container-name: figure;
  --featured: true;
}

/* Featured figure style. */
@container figure style(--featured: true) {
  img {
    /* Custom styling */
  }

  figcaption {
    /* Custom styling */
  }
}

如果 --featured: true 不存在，我們將默認使用基本 figure 設(shè)計。我們可以使用 not 關(guān)鍵字來檢查 figure 是否沒有 display: flex。

/* Default figure style. */
@container figure not style(--featured: true) {
  figcaption {
    /* Custom styling */
  }
}

要知道的幾個細節(jié)默認情況下，每個元素都是樣式容器

所以根本不需要定義一個樣式容器。默認情況下，它就在那里。

我們不能用類名來解決這個問題嗎？

是的，我們可以。使用樣式查詢的目的是使 CSS 更易讀并更容易修改。上述邏輯可以作為一個組件 CSS 寫出，而無需將所有這些樣式添加到條件類中。

事例：https://codepen.io/shadeed/pen/ZERZxzG/a583817975bae6b78308acb6939a9a54?editors=1100

減少 CSS 特定性問題

我喜歡使用樣式查詢的原因是，它將減少 CSS 特定性，因為我們將不太依賴 CSS 變化類或 HTML 數(shù)據(jù)屬性來對組件變化進行樣式設(shè)置。

在下面的 CSS 中，我們?yōu)?section 添加了基本樣式。沒有什么特別的。

.section {
  background-color: lightgrey;
}

.section__title,
.section__desc {
  color: #222;
}

我們需要一種方法來為它設(shè)置不同的主題，因此我們使用了變化類。

.section--dark {
  background-color: #222;
}

.section--dark .section__title,
.section--dark .section__desc {
  color: #fff;
}

使用樣式查詢，我們可以在 .section 組件周圍使用容器，然后在不在 CSS 中創(chuàng)建更多特定性的情況下為標題和描述打標簽。

@container style(--theme: dark) {
  .section {
    background-color: #222;
  }

  .section__title,
  .section__desc {
    color: #fff;
  }
}

這看起來干凈多了。

接下來，我們探索幾種樣式查詢可能有幫助的使用情況。

使用情況和示例

基于上下文的樣式設(shè)置

這是一種常見的使用情況，在同一包裝器中我們使用了相同的組件但用法不同。在右側(cè)，我們有一個文章組件，可能包含一個數(shù)字或不包含。

目前，我們可能會使用一個新的 CSS 類來解決樣式設(shè)置問題，或者可能在文章組件本身上使用變化類。

.most-popular {
  counter-reset: list;
}

.most-popular article {
  /* custom styling */
}

或者我們可能在 HTML 中使用 data 屬性。

.most-popular[data-counter="true"] {
  counter-reset: list;
}

.most-popular[data-counter="true"] .article {
  /* custom styling */
}

使用 CSS 樣式查詢，我們可以在父元素中添加一個 CSS 變量，并根據(jù)此對文章進行樣式設(shè)置。看看這個：

.most-popular {
  --counter: true;
}

@container style(--counter: true) {
  .articles-list {
    counter-reset: list;
  }

  .article {
    display: flex;
    align-items: flex-start;
  }

  .article:before {
    counter-increment: list;
    content: counter(list);
  }
}

我們甚至不需要在文章組件上使用變化類。也不需要使用 CSS 嵌套。

示例：https://codepen.io/shadeed/pen/LYBYYWP/b53e0baa891dc48b0689e1f926f89b96?editors=1100

組件級的主題切換

我們構(gòu)建的一些組件根據(jù)特定條件需要使用不同的主題。在下面的示例中，我們有一個包含不同統(tǒng)計組件的儀表板。

基于包裝器，我們需要切換組件的主題。

目前，我們可以使用特殊類根據(jù)它們的容器為自定義統(tǒng)計組件添加樣式。

.special-wrapper .stat {
  background-color: #122c46;
}

.special-wrapper .stat__icon {
  background-color: #2e547a;
}

.special-wrapper .stat__title {
  background-color: #b3cde7;
}

上面的做法一點也沒有錯，也不壞，但因為我們嵌套了CSS，所以增加了特殊性。讓我們探討一下如何用樣式查詢來實現(xiàn)上述內(nèi)容。

首先，我們需要在特殊包裝器上定義一個切換按鈕。然后，我們可以檢查該開關(guān)是否處于激活狀態(tài)，并對狀態(tài)組件進行相應(yīng)的設(shè)計。

.special-wrapper {
  --theme: dark;
  container-name: stats;
}

@container stats style(--theme: dark) {
  .stat {
    /* Add the dark styles. */
  }
}

在這種情況下，樣式查詢的有用之處在于，將上述樣式放在 CSS 中的一個地方是有意義的。

/* stat.css */
.stat {
  /* default styling */
}

@container stats style(--theme: dark) {
  .stat {
    /* custom styling */
  }
}

頭像組

在這個例子中，我們有一組用戶的頭像。我們需要根據(jù)在父代上設(shè)置的一個CSS變量，以不同的方式來布置它們。我從Atlassian設(shè)計系統(tǒng)中挑選了這個例子。

<div class="avatars-wrapper">
  <div class="avatars-list">
    <div class="avatar"></div>
    <!-- more avatars -->
  </div>
</div>

在CSS中，我給容器添加了一個名字，并定義了--appearance: default變量。

.avatars-wrapper {
  container-name: avatars;
}

.avatars-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

有了這個，我們就可以使用樣式查詢來改變基于--appearance變量的布局。

@container avatars style(--appearance: stack) {
  .avatar {
    box-shadow: 0 0 0 2px #fff;
  }

  .avatar + .avatar {
    margin-inline-start: -0.5rem;
  }
}

@container avatars style(--appearance: grid) {
  .avatars-list {
    gap: 0.5rem;
    max-width: 200px;
  }
}

地址：https://codepen.io/shadeed/pen/KKeYLXG/464bd92260d290df58e1387c71d1d30f?editors=1100

條件裝飾樣式

在某些情況下，我們可能需要根據(jù)文本元素在 HTML 中的位置為其添加條件裝飾樣式。

標題和段落下方有一個旋轉(zhuǎn)的背景效果。這是通過偽元素實現(xiàn)的：

<div class="content">
  <h2><!-- Title here --></h2>
  <p><!-- Description --></p>
</div>

要對它們進行樣式設(shè)置，我們可以使用 CSS 變量并檢查它是否已切換，然后相應(yīng)地添加樣式。在示例中，:after 偽元素被添加到 .content 容器的每個子元素。

.content {
  --decorated: true;
}

@container style(--decorated: true) {
  :after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--dec-color, green);
    opacity: 0.1;
    z-index: -1;
    transform: rotate(-1.5deg);
  }
}

地址：https://codepen.io/shadeed/pen/abKxgyW/a0e0639a118fac1b781a5de18c598789

RTL 樣式：卡片組件

寫 RTL 樣式時，第一步是在<html>元素中添加 dir=rtl。一旦添加，每個元素的 direction CSS 屬性都會變?yōu)?direction: rtl。

隨著邏輯屬性的興起，我們不需要完全重寫 CSS。考慮以下示例：

.item {
  margin-inline-start: 1rem;
}

對于從左到右的布局，上述內(nèi)容將計算為 margin-left。對于從右到左的布局，它將是 margin-right。很酷，對吧？但是我們?nèi)匀粵]有檢查漸變方向的邏輯 CSS。

樣式查詢可以用于解決這個問題。考慮以下示例：

我們有一個組件，由兩個元素組成，這兩個元素都應(yīng)根據(jù)文檔改變方向：

漸變：對于 LTR 布局，它從左到右。
箭頭方向：指向右邊。

上述內(nèi)容無法使用邏輯 CSS 控制。目前，我們這樣做：

html[dir="rtl"] .card {
  background: linear-gradient(to left, ...);
}

html[dir="rtl"] .card__cta {
  transform: scaleX(-1);
}

使用樣式查詢，我們可以查詢?nèi)萜鞑z查direction是否等于 rtl，并根據(jù)此對樣式進行更改。

.card {
  --bg-angle: to right;
  background: linear-gradient(var(--bg-angle), #5521c3, #5893eb);
}

@container card style(direction: rtl) {
  .card {
    --bg-angle: to left;
  }

  .card__cta {
    transform: scaleX(-1);
  }
}

請注意，樣式查詢的當前原型不支持 style() 查詢中的 CSS 屬性。因此，我在示例中使用了 CSS 變量。

新聞模塊

這是我在 bbc.com 上發(fā)現(xiàn)的真實問題。最初，我們有以下新聞組件。

根據(jù)其容器，樣式應(yīng)略有改變。考慮以下圖：

注意組件現(xiàn)在有兩個修改：

白色背景。
標題和描述容器四周填充。

這是 BBC.com 上 CSS 的樣式：

.media--padded {
  background: #fff;
}

.media--padded .media__content {
  padding: 0.75rem 0.75rem 3rem 0.75rem;
}

我們?nèi)绾瓮ㄟ^樣式查詢來解決這個問題呢？很簡單，我們需要一種方法來告訴組件，如果你住在這個容器內(nèi)，卡片的樣式應(yīng)該被填充。

.special-container {
  --card--padded: true;
}

@container style (--card-padded: true) {
  .media {
    background: #fff;
  }

  .media__content {
    padding: 0.75rem 0.75rem 3rem 0.75rem;
  }
}

總結(jié)

CSS 樣式查詢是 CSS 的強大補充。我迫不及待地想看看社區(qū)中的其他人會用它們做什么。哦，我也忍不住想在 iShadeed 實驗室中為樣式查詢創(chuàng)建一個新目錄。敬請期待！

原文：https://ishadeed.com/article/css-container-style-queries/

歡迎長按圖片加刷碗智為好友，定時分享 Vue React Ts 等。

TML教程

超文本標記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用于創(chuàng)建網(wǎng)頁的標準標記語言。

您可以使用 HTML 來建立自己的 WEB 站點，HTML 運行在瀏覽器上，由瀏覽器來解析。

在本教程中，您將學(xué)習(xí)如何使用 HTML 來創(chuàng)建站點。

HTML 很容易學(xué)習(xí)！相信您能很快學(xué)會它！

本教程包含了數(shù)百個 HTML 實例。

使用本站的編輯器，您可以輕松實現(xiàn)在線修改 HTML，并查看實例運行結(jié)果。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>孫叫獸的博客</title>
    </head>
    <body>
        <h1>我的第一個標題</h1>
        <p>我的第一個段落。</p>
    </body>
</html>

HTML 文檔的后綴名

.html

.htm

都可以。

HTML 簡介

實例：

<!doctype html>
<html>
<header>
<meta charset="utf-8">
<title>孫叫獸的博客</title>
</header>
<body>
<h1>這是我的標題</h1>
<p>這是我的段落</p>
</body>
</html>

實例解析

<!DOCTYPE html> 聲明為 HTML5 文檔
<html> 元素是 HTML 頁面的根元素
<head> 元素包含了文檔的元（meta）數(shù)據(jù)，如 <meta charset=“utf-8”> 定義網(wǎng)頁編碼格式為 utf-8。
<title> 元素描述了文檔的標題
<body> 元素包含了可見的頁面內(nèi)容
<h1> 元素定義一個大標題
<p> 元素定義一個段落

什么是HTML？

HTML 是用來描述網(wǎng)頁的一種語言。
HTML 指的是超文本標記語言: HyperText Markup Language
HTML 不是一種編程語言，而是一種標記語言
標記語言是一套標記標簽 (markup tag)
HTML 使用標記標簽來描述網(wǎng)頁
HTML 文檔包含了HTML 標簽及文本內(nèi)容
HTML文檔也叫做 web 頁面
HTML 標簽
HTML 標記標簽通常被稱為 HTML

標簽

HTML 標簽是由尖括號包圍的關(guān)鍵詞，比如 <html>

HTML 標簽通常是成對出現(xiàn)的，比如 <b> 和 </b>

標簽對中的第一個標簽是開始標簽，第二個標簽是結(jié)束標簽

開始和結(jié)束標簽也被稱為開放標簽和閉合標簽

<標簽>內(nèi)容</標簽>

html元素

“HTML 標簽” 和 “HTML 元素” 通常都是描述同樣的意思.

但是嚴格來講, 一個 HTML 元素包含了開始標簽與結(jié)束標簽，如下實例:

HTML 元素:

<p>這是一個段落</p>

web瀏覽器

Web瀏覽器（如谷歌瀏覽器，Internet Explorer，F(xiàn)irefox，Safari）是用于讀取HTML文件，并將其作為網(wǎng)頁顯示。

瀏覽器并不是直接顯示的HTML標簽，但可以使用標簽來決定如何展現(xiàn)HTML頁面的內(nèi)容給用戶

html網(wǎng)頁結(jié)構(gòu)

<html>
    <head>
        <title>頁面標題</title>
    </head>
    <body>
        <h1>這是一個標題</h1>
        <p>這是一個段落。</p>
        <p>這是另外一個段落。</p>
    </body>
</html>

html的版本：

<!DOCTYPE>聲明

<!DOCTYPE>聲明有助于瀏覽器中正確顯示網(wǎng)頁。

網(wǎng)絡(luò)上有很多不同的文件，如果能夠正確聲明HTML的版本，瀏覽器就能正確顯示網(wǎng)頁內(nèi)容。

doctype 聲明是不區(qū)分大小寫的，以下方式均可：

<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>

html5

<!DOCTYPE html>

html4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4 Transitional//EN""
http://www.w3.org/TR/html4/loose.dtd">

xhtml1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

中文編碼

目前在大部分瀏覽器中，直接輸出中文會出現(xiàn)中文亂碼的情況，這時候我們就需要在頭部將字符聲明為 UTF-8。

在線咨詢

上一篇：Gin(三):與模板配合使用 tmpl,go web 開發(fā)最火框架之一
下一篇：誰的鍋？頻繁殺后臺惹怒VLC播放器，華為多款新機型被列入黑名單

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商