css 媒体查询

SS 媒体查询是一种功能强大的技术手段，它可以根据不同的设备属性（例如视口宽度、屏幕比例、设备方向等）来应用不同的样式。这种技术在构建响应式和自适应设计方面具有巨大的优势，它能够确保您的网站在各种类型的设备上都呈现出良好的视觉效果。

基本语法

媒体查询的基本语法如下：

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

not：表示不匹配指定的媒体类型。
only：表示只匹配指定的媒体类型，这可以避免老旧浏览器执行不必要的样式表下载。
mediatype：指的是媒体类型，如 screen、print 等。
expressions：是一系列的媒体特性表达式，用来定义媒体查询的具体条件。

示例

一个简单的媒体查询示例：

/* 默认样式 */
body {
  background-color: lightblue;
}

/* 当视口宽度小于600px时，改变背景颜色 */
@media screen and (max-width: 600px) {
  body {
    background-color: lightgreen;
  }
}

常见的媒体特性

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

width：视口的宽度。
height：视口的高度。
orientation：设备的方向（portrait 或 landscape）。
aspect-ratio：视口的宽高比。
device-pixel-ratio：设备的像素比率。
hover：设备是否支持悬停操作。
pointer：设备的指针精度。

我们可以针对手机、平板和电脑屏幕进行适配。

手机 - 通常屏幕宽度在 320px 到 480px 之间。
平板 - 屏幕宽度一般在 600px 到 1024px 之间。
电脑 - 屏幕宽度通常大于 1024px。

下面是针对这些设备的一个简单响应式布局示例。我们将使用一个简单的两栏布局，其中包含一个主要内容区域和一个侧边栏。侧边栏在手机屏幕上会被隐藏，在平板屏幕上会显示为下方的内容块，在电脑屏幕上则会显示为右侧的侧边栏。

HTML 结构

<!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; /* 隐藏侧边栏 */
  }
}

/* 平板屏幕 */
@media (min-width: 481px) and (max-width: 1024px) {
  aside {
    display: block; /* 显示侧边栏 */
    width: 100%; /* 侧边栏占据全宽 */
    margin-top: 20px; /* 添加顶部间距 */
  }
}

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

  main {
    flex: 2; /* 主要内容占据2/3的宽度 */
  }

  aside {
    flex: 1; /* 侧边栏占据1/3的宽度 */
  }
}

解释

全局样式：设置基本的字体、颜色、间距等。
手机屏幕：当屏幕宽度小于或等于 480px 时，侧边栏将被隐藏。
平板屏幕：当屏幕宽度介于 481px 和 1024px 之间时，侧边栏将显示，并占据整个宽度，位于主要内容下方。
电脑屏幕：当屏幕宽度大于 1024px 时，主内容区和侧边栏将并排显示，主内容区占据2/3的宽度，侧边栏占据1/3的宽度。

近，Chrome团队发布了对一个新的CSS规范的实验性支持，即样式查询。简而言之，它让我们查询容器的样式，而不是只查询尺寸。在查询容器尺寸不够的情况下，这可能很有帮助。

CSS 容器查询

介绍样式查询之前，我们先来回顾容器查询。

CSS 容器查询（Container Queries）是一项新的 CSS 功能，允许开发人员根据元素的大小来应用样式。这意味着，开发人员可以为不同大小的设备或浏览器窗口应用不同的样式，而无需使用媒体查询或使用 JavaScript 来检测设备大小。

我们来看看一个例子：

.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将应用于该容器内的组件。

样式查询

简单地说，样式查询让我们查询一个容器的CSS属性或CSS变量。

样式查询仍然是试验性的，目前只在Chrome Canary中实现。要测试它们，请进入chrome://flags并激活 "Experimental Web Platform features"的切换。

例如，我们可以检查容器是否有 display: flex，并在此基础上为子元素设计样式。

.page-header {
  display: flex;
}

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

理想情况下，上述做法应该是可行的，但目前Chrome Canary中的样式查询原型仅局限于CSS变量。样式查询预计将在Chrome M111中出现。

现在，我们可以检查变量--boxed: true是否被添加到容器中，如果是，我们可以在此基础上改变子元素的样式。

请看下图:

请注意，容器查询和样式查询的主要区别在于，前者是针对大小的查询，后者是针对样式的查询。

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

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

问题

在探讨我们可以在哪里使用样式查询之前，我们先来回答大家常见的一个问题：样式查询能解决什么问题？容器查询还不够吗？

这是一个好问题。在容器查询中，我们可以根据一个组件的父级宽度来控制它的样式，这非常有用。不过，在某些情况下，我们可能不需要查询尺寸，而是想查询一个容器的计算样式。

为了让你有更好的了解，请看下图：

这是一篇来自CMS的文章正文。我们有一个默认的图片样式和另一个看起来有特色的样式。

下面是对应的代码：

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

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

当我们开始对特色的进行造型时，我们需要覆盖上述内容，并有一个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 类，以便可以对其进行样式设置。

.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，然后基于这个进行样式设置。

<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 设计。我们可以使用 not 关键字来检查 figure 是否没有 display: flex。

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

要知道的几个细节默认情况下，每个元素都是样式容器

所以根本不需要定义一个样式容器。默认情况下，它就在那里。

我们不能用类名来解决这个问题吗？

是的，我们可以。使用样式查询的目的是使 CSS 更易读并更容易修改。上述逻辑可以作为一个组件 CSS 写出，而无需将所有这些样式添加到条件类中。

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

减少 CSS 特定性问题

我喜欢使用样式查询的原因是，它将减少 CSS 特定性，因为我们将不太依赖 CSS 变化类或 HTML 数据属性来对组件变化进行样式设置。

在下面的 CSS 中，我们为 section 添加了基本样式。没有什么特别的。

.section {
  background-color: lightgrey;
}

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

我们需要一种方法来为它设置不同的主题，因此我们使用了变化类。

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

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

使用样式查询，我们可以在 .section 组件周围使用容器，然后在不在 CSS 中创建更多特定性的情况下为标题和描述打标签。

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

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

这看起来干净多了。

接下来，我们探索几种样式查询可能有帮助的使用情况。

使用情况和示例

基于上下文的样式设置

这是一种常见的使用情况，在同一包装器中我们使用了相同的组件但用法不同。在右侧，我们有一个文章组件，可能包含一个数字或不包含。

目前，我们可能会使用一个新的 CSS 类来解决样式设置问题，或者可能在文章组件本身上使用变化类。

.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 变量，并根据此对文章进行样式设置。看看这个：

.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

组件级的主题切换

我们构建的一些组件根据特定条件需要使用不同的主题。在下面的示例中，我们有一个包含不同统计组件的仪表板。

基于包装器，我们需要切换组件的主题。

目前，我们可以使用特殊类根据它们的容器为自定义统计组件添加样式。

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

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

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

上面的做法一点也没有错，也不坏，但因为我们嵌套了CSS，所以增加了特殊性。让我们探讨一下如何用样式查询来实现上述内容。

首先，我们需要在特殊包装器上定义一个切换按钮。然后，我们可以检查该开关是否处于激活状态，并对状态组件进行相应的设计。

.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 */
  }
}

头像组

在这个例子中，我们有一组用户的头像。我们需要根据在父代上设置的一个CSS变量，以不同的方式来布置它们。我从Atlassian设计系统中挑选了这个例子。

<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

条件装饰样式

在某些情况下，我们可能需要根据文本元素在 HTML 中的位置为其添加条件装饰样式。

标题和段落下方有一个旋转的背景效果。这是通过伪元素实现的：

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

要对它们进行样式设置，我们可以使用 CSS 变量并检查它是否已切换，然后相应地添加样式。在示例中，: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 属性都会变为 direction: rtl。

随着逻辑属性的兴起，我们不需要完全重写 CSS。考虑以下示例：

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

对于从左到右的布局，上述内容将计算为 margin-left。对于从右到左的布局，它将是 margin-right。很酷，对吧？但是我们仍然没有检查渐变方向的逻辑 CSS。

样式查询可以用于解决这个问题。考虑以下示例：

我们有一个组件，由两个元素组成，这两个元素都应根据文档改变方向：

渐变：对于 LTR 布局，它从左到右。
箭头方向：指向右边。

上述内容无法使用逻辑 CSS 控制。目前，我们这样做：

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

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

使用样式查询，我们可以查询容器并检查direction是否等于 rtl，并根据此对样式进行更改。

.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 上发现的真实问题。最初，我们有以下新闻组件。

根据其容器，样式应略有改变。考虑以下图：

注意组件现在有两个修改：

白色背景。
标题和描述容器四周填充。

这是 BBC.com 上 CSS 的样式：

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

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

我们如何通过样式查询来解决这个问题呢？很简单，我们需要一种方法来告诉组件，如果你住在这个容器内，卡片的样式应该被填充。

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

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

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

总结

CSS 样式查询是 CSS 的强大补充。我迫不及待地想看看社区中的其他人会用它们做什么。哦，我也忍不住想在 iShadeed 实验室中为样式查询创建一个新目录。敬请期待！

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

欢迎长按图片加刷碗智为好友，定时分享 Vue React Ts 等。

TML教程

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

在本教程中，您将学习如何使用 HTML 来创建站点。

HTML 很容易学习！相信您能很快学会它！

本教程包含了数百个 HTML 实例。

使用本站的编辑器，您可以轻松实现在线修改 HTML，并查看实例运行结果。

<!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）数据，如 <meta charset=“utf-8”> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落

什么是HTML？

HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面
HTML 标签
HTML 标记标签通常被称为 HTML

标签

HTML 标签是由尖括号包围的关键词，比如 <html>

HTML 标签通常是成对出现的，比如 <b> 和 </b>

标签对中的第一个标签是开始标签，第二个标签是结束标签

开始和结束标签也被称为开放标签和闭合标签

<标签>内容</标签>

html元素

“HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思.

但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:

HTML 元素:

<p>这是一个段落</p>

web浏览器

Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示。

浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户

html网页结构

<html>
    <head>
        <title>页面标题</title>
    </head>
    <body>
        <h1>这是一个标题</h1>
        <p>这是一个段落。</p>
        <p>这是另外一个段落。</p>
    </body>
</html>

html的版本：

<!DOCTYPE>声明

<!DOCTYPE>声明有助于浏览器中正确显示网页。

网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。

doctype 声明是不区分大小写的，以下方式均可：

<!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">

中文编码

目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8。

在线咨询

上一篇：Gin(三):与模板配合使用 tmpl,go web 开发最火框架之一
下一篇：谁的锅？频繁杀后台惹怒VLC播放器，华为多款新机型被列入黑名单

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商