目录
当前响应设计状态
什么是容器查询
在设计时考虑容器查询
与开发人员沟通
在设计响应式组件时避免复杂性
CSS容器查询用例
聊天列表
Main content
首页 web前端 css教程 你可能不了解的CSS容器查询!!

你可能不了解的CSS容器查询!!

Jun 11, 2021 am 11:43 AM
css

你可能不了解的CSS容器查询!!

在前端开发中经常需要按不同屏幕尺寸来进设计达到PC和移动端响应式。我们一般使用CSS媒体查询来检测视口宽度或高度,然后根据该模式改变设计。 这就是在过去10年中设计Web布局的方式。

CSS容器查询,一个长期以来被web开发者要求的特性,很快就会出现在CSS中,在最新的 Chrome Canary 中,我们可以通过 chrome://flags/#enable-container-queries 开启 Container Queries 功能。在本文中,我将介绍它是什么,它将如何改变作为设计师的工作流,等等。

当前响应设计状态

当前,我们实现响应式,一般需要 UI 设计三个样式,分别是移动,平板电脑和桌面等。

你可能不了解的CSS容器查询!!

在上图中,UI设计了三种版本,因此开发人员可以很好的实现它,这是很 nice的(这怕偷懒的 UI 只提供PC版本,这就很蛋疼)。

现在我们来看看使用媒体查询来看看怎么实现它。

你可能不了解的CSS容器查询!!

上图是同一个组件,它有三个变体,即defaultCardFeatured。在CSS中,开发人员需要创建此组件的三个变体,其中每个组成均是唯一的。

.c-media {
  /* the default styles */
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

@media (min-with: 400px) {
  .c-media--card {
    display: block;
  }

  .c-media--card img {
    margin-bottom: 1rem;
  }
}

@media (min-with: 1300px) {
  .c-media--featured {
    position: relative;
    /* other styles */
  }

  .c-media--featured .c-media__content {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
}
登录后复制

上面的变体取决于媒体查询或视口宽度。 这意味着,我们无法根据其父宽度控制它们。 现在你可能会想,这里有什么问题? 喔或,这是一个很好的问题。

问题是,只有当视口宽度大于特定值时,开发人员才会使用组件的变体。例如,如果我在平板中使用 featured 也就是 PC 的样式,它不能工作,为什么?因为它的媒体查询宽度是大于1300px

你可能不了解的CSS容器查询!!

不仅如此,当内容低于预期时,我们还会面临一个问题。有时,UP主可能只会添加一篇文章,而设计是包含其中的三篇。在这种情况下,要么我们将有一个空的空间,要么项目将扩展以填满可用的空间。考虑下图:

你可能不了解的CSS容器查询!!

在第一种情况下(Case 1),文章太宽,会导致封面变形。第二种情况下(Case 2)也是一样的问题

如果使用容器查询,我们可以通过查询父组件来决定如何显示特定组件来解决这些问题。考虑下图,它展示了我们如何使用容器查询来修复这个问题。

你可能不了解的CSS容器查询!!

这样的话,如果我们把思路转向组件的父组件呢?换句话说,如果我们查询父组件,并根据父组件的宽度或高度来决定组件应该是什么样子的呢?我们来看下容器查询的概念。

什么是容器查询

首先,让我定义容器。 它就包含另一个元素的元素,一般我们叫它 wrapper

最新的 Chrome Canary 中,我们可以通过 chrome://flags/#enable-container-queries 开启 Container Queries 功能。

当一个组件被放置在一个项中,它就被包含在该项中。这意味着,我们可以查询父元素的宽度并据此修改它。考虑下图

你可能不了解的CSS容器查询!!

注意,每个卡片都有一个黄色的轮廓线,代表每个组件的父组件。使用CSS容器查询,我们可以根据父组件的宽度修改组件。

<div class="o-grid">
  <div class="o-grid__item">
    <article class="c-media"></article>
  </div>
  <!-- + more items -->
</div>
登录后复制

该组件是具有类.c-media的项,它的父级是.o-grid__item元素。 在CSS中,我们可以执行以下操作:

.o-grid__item {
  contain: layout inline-size style;
}

.c-media {
  /* Default style */
}

@container (min-width: 320px) {
  .c-media {
    /* The styles */
  }
}

@container (min-width: 450px) {
  .c-media {
    /* The styles */
  }
}
登录后复制

首先,我们告诉浏览器,每个带有class .o-grid项的元素都是一个容器。然后,再告诉浏览器,如果父元素的宽度等于或大于500px,它应该以不同的方式显示。对于700px查询也是如此。这就是CSS容器查询的工作原理。

此外,我们可以在任何想要的地方定义它们,这意味着如果需要,我们可以在顶级容器上进行查询。现在大家已经理解了CSS容器查询的基本思想,在看看下面图片加深一下映像。

你可能不了解的CSS容器查询!!

在左边,这是一个正在调整大小的视口。在右边,一个根据父组件宽度更改的组件。这就是容器查询的功能和用途。

在设计时考虑容器查询

作为一名 UI,你需要适应这个革命性的CSS特性,因为它将改变我们为网页设计的方式。我们不仅为屏幕尺寸设计,还考虑组件在容器宽度变化时应如何适应。

现在,设计系统变得越来越流行。设计团队将构建一组规则和组件,以便其他成员可以基于它们构建页面。随着CSS容器查询的到来,我们还将设计一个组件应该如何根据其父组件的宽度进行调整。

考虑以下设计:

你可能不了解的CSS容器查询!!

请注意,我们有标题、文章部分、引文和时事通讯。它们中的每一个都应该适应父视图的宽度。

我可以把这些组件分成以下几个部分

  • Viewport (媒体查询)
  • Parent (容器查询)
  • 通用:不受影响的组件,如按钮、标签、段落。

对于示例UI,下面是我们如何划分组件。

你可能不了解的CSS容器查询!!

当我们在设计UI时以这种心态思考时,我们可以开始考虑组件的不同变体,这些组件依赖于它们的父宽度。

在下面的图中,请注意文章组件的每个变化是如何以特定的宽度开始的。

你可能不了解的CSS容器查询!!

作为一名设计师,一开始考虑父级宽度可能有点奇怪,但这是未来的发展方向。我们为前端开发人员提供每个组件的细节和版本,他们可以使用它们。

不仅如此,我们还可能有一个组件的变体,它应该只显示在特定的上下文中。例如,事件列表页面。在这种情况下,清楚在何处使用此变体是很重要的。

问题是,如何告诉设计师应该在哪里使用这些组件。

与开发人员沟通

良好的沟通是项目成功的重要因素。作为一名设计人员,我们应该提供关于应该在何处使用组件变体的指导。它可以是一个完整的页面设计,也可以是一个显示如何使用每个组件的简单图。

1你可能不了解的CSS容器查询!!

注意我是如何将每个变体映射到一个特定的上下文,而不是一个视口。为了进一步证明这一点,我们配合 CSS网格一起使用时,组件的行为会有何不同。

在CSS网格中,我们可以通过使用auto-fit关键字告诉浏览器,如果列的数量低于预期,我们希望展开列(您可以在这里阅读更多相关内容)。这一功能非常强大,因为它可以帮助我们在相同的背景下呈现不同的变体。

1你可能不了解的CSS容器查询!!

让一个组件对它的父宽度做出反应是非常有用的。正如刚才所看到的,我们重新查看了桌面大小的页面,并且有不同的部分,每个部分的列数不同。

在设计响应式组件时避免复杂性

重要的是要记住,组件的内部部分就像乐高游戏。我们可以根据当前的变化对它们进行排序,但所有的东西都有一个限制。有时,前端开发人员最好处理一个全新的组件,而不是使用容器查询创建变体。

考虑以下。

1你可能不了解的CSS容器查询!!

它具有以下内容:

  • 头像
  • 名称
  • 按钮
  • 键/值对

如果内部部分保持不变,或者至少不包含新的部分,我们可以改变组件,并有如下所示的多种变化。

1你可能不了解的CSS容器查询!!

CSS容器查询用例

我们来探索一些可以使用CSS容器查询实现的用例。

聊天列表

我在Facebook messenger上看到了这种模式。聊天列表根据视口宽度改变。我们可以使用CSS容器查询来实现它。

1你可能不了解的CSS容器查询!!

当有足够的空间时,清单将展开并显示每个用户的名称。聊天列表的父元素可以是动态调整大小的元素(例如:使用CSS视口单元,或CSS比较函数)。

// HTML
<div class="content">
  <aside>
    <ul>
      <li>
        <img src="/static/imghw/default1.png"  data-src="shadeed.jpg"  class="lazy"   alt="Ahmad Shadeed" />
        <span class="name">Ahmad Shadeed</span>
      </li>
    </ul>
  </aside>
  <main>
    <h2 id="Main-nbsp-content">Main content</h2>
  </main>
</div>
登录后复制
// CSS
.content {
  display: grid;
  grid-template-columns: 0.4fr 1fr;
}

aside {
  contain: layout inline-size style;
}

@container (min-width: 180px) {
  .name {
    display: block;
  }
}
登录后复制

aside 宽度是0.4f,所以它是动态宽度。另外,我添加了contain属性。然后,如果容器宽度大于180px,将显示用户名。

另一个类似的用例是侧导航。我们可以切换导航项标签的位置,从在新行或旁边的图标。

1你可能不了解的CSS容器查询!!

当容器很小时,导航项标签是如何从一个新行切换的,当有足够的空间时,导航项标签是如何靠近导航图标的。

示例地址:https://codepen.io/shadeed/pen/Popmryw?editors=0100

英文原文地址:https://ishadee.com/article/contner-queries-for-designers/

作者:AAhmad Shadeed

更多编程相关知识,请访问:编程视频!!

以上是你可能不了解的CSS容器查询!!的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

vue中怎么用bootstrap vue中怎么用bootstrap Apr 07, 2025 pm 11:33 PM

在 Vue.js 中使用 Bootstrap 分为五个步骤:安装 Bootstrap。在 main.js 中导入 Bootstrap。直接在模板中使用 Bootstrap 组件。可选:自定义样式。可选:使用插件。

HTML,CSS和JavaScript的角色:核心职责 HTML,CSS和JavaScript的角色:核心职责 Apr 08, 2025 pm 07:05 PM

HTML定义网页结构,CSS负责样式和布局,JavaScript赋予动态交互。三者在网页开发中各司其职,共同构建丰富多彩的网站。

bootstrap怎么写分割线 bootstrap怎么写分割线 Apr 07, 2025 pm 03:12 PM

创建 Bootstrap 分割线有两种方法:使用 标签,可创建水平分割线。使用 CSS border 属性,可创建自定义样式的分割线。

了解HTML,CSS和JavaScript:初学者指南 了解HTML,CSS和JavaScript:初学者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

bootstrap怎么设置框架 bootstrap怎么设置框架 Apr 07, 2025 pm 03:27 PM

要设置 Bootstrap 框架,需要按照以下步骤:1. 通过 CDN 引用 Bootstrap 文件;2. 下载文件并将其托管在自己的服务器上;3. 在 HTML 中包含 Bootstrap 文件;4. 根据需要编译 Sass/Less;5. 导入定制文件(可选)。设置完成后,即可使用 Bootstrap 的网格系统、组件和样式创建响应式网站和应用程序。

bootstrap怎么插入图片 bootstrap怎么插入图片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入图片有以下几种方法:直接插入图片,使用 HTML 的 img 标签。使用 Bootstrap 图像组件,可以提供响应式图片和更多样式。设置图片大小,使用 img-fluid 类可以使图片自适应。设置边框,使用 img-bordered 类。设置圆角,使用 img-rounded 类。设置阴影,使用 shadow 类。调整图片大小和位置,使用 CSS 样式。使用背景图片,使用 background-image CSS 属性。

bootstrap按钮怎么用 bootstrap按钮怎么用 Apr 07, 2025 pm 03:09 PM

如何使用 Bootstrap 按钮?引入 Bootstrap CSS创建按钮元素并添加 Bootstrap 按钮类添加按钮文本

bootstrap怎么调整大小 bootstrap怎么调整大小 Apr 07, 2025 pm 03:18 PM

要调整 Bootstrap 中元素大小,可以使用尺寸类,具体包括:调整宽度:.col-、.w-、.mw-调整高度:.h-、.min-h-、.max-h-

See all articles