今天PM过来问我: 蛋总,有些用户反馈他们屏幕太小了,需要滑动, 操作不方便。 我们的系统能不能改成自适应布局
啊?
我顿时虎躯一震:woc, 要把一个迭代了一年多的固定设计的产品,改成自适应布局? 真让人害怕。
然后我就去查了一些自适应布局的资料,尝试找出一种改造成本最小的方案。
过程中发现了一个比较好玩的东西:CSS 容器查询
。
对此,我做了一下简单的整理和总结,在此分享给大家,希望对大家有所启发。
容器查询允许开发者根据容器元素的大小
来设置元素的样式。
它类似于 @media
查询,不同之处在于它根据容器的大小
而不是视口的大小
进行判断。
我们使用创建响应式设计时,通常使用媒体查询
根据视口的大小
来更改文档布局。
但是,许多设计都有一些通用组件,这些组件会根据其容器的可用宽度来更改布局。
这可能并不总是与视口的大小有关
,而是与组件在布局中的放置位置有关
。
如果有空间,它将显示为两列,否则,我们希望将其堆叠显示。
上图中的左右两个组件,是同一个组件,功能上是完全一样的,只是要展示不同的布局。
目前来说, 我们可以通过以某种方式识别该组件,比如通过添加一个类
或使用其他选择器
来定位元素,该选择器可以查看它在文档结构中的位置。
但是,这并不能完全实现媒体查询在整个布局中的作用。
媒体查询使我们能够根据视口的范围来改变元素的大小。
当我们添加一个类或目标元素时,我们决定当对象在侧边栏中时,它必须使用堆叠布局。
但是,就可用空间而言,很可能是在大屏幕上,侧边栏中的对象将具有足够的空间来以并排布局显示。
容器查询将解决这种情况。
除了查看视口的大小,我们还可以查看容器的大小,并根据容器中的空间进行布局调整。
容器查询, 将成为css containment
规范的一部分,并向contain
属性添加新值。
该contain属性
最初是为了性能优化
而设计的。
它为Web开发人员提供了一种方法来隔离DOM的各个部分,并向浏览器声明这些部分与文档的其余部分无关。
使用contain: size;
表示浏览器在两个维度上都知道该区域的大小。
知道它有多大的容器,正是我们进行容器查询所需要的。
但是,通常我们并不经常知道这两个维度有多大。
当我们使用媒体查询时,大多数时候我们都会指定可用的宽度(或内联大小)。
我们将列定义为: 该维度中,空间的百分比
或分数
。
因此,容器查询仅允许通过在一维
中指示大小来扩展包含属性,这被描述为单轴遏制
。
以下CSS将创建一个仅在嵌入式轴上包含容器的容器,内容可以增长到在块轴上所需的大小:
.sidebar {
contain: layout inline-size;
}
声明contain
属性,并且把layout
和size
的值叠加, 浏览器便会在该元素上创建一个containment
上下文。
声明了这个属性,就意味着浏览器知道: 我以后可能要查询此容器。
然后,可以编写一个查询来查找此包含上下文而不是视口大小,以便为组件制定布局决策。
使用创建容器查@container
。
这将查询最近的包含上下文。
为了使卡仅在边栏宽于700px时才显示为两列,我们使用以下CSS:
@container (min-width: 700px) {
.card {
display: grid;
grid-template-columns: 2fr 1fr;
}
}
如果布局的其他区域也是containment,那么我们可以将组件放到那些区域中,它将自动响应相关的容器。这使得我们可以在模式库中创建的各种组件真正可重用,而无需知道它们所处的上下文。
其实还有很多事情可以说,上文介绍的只是一些基本概念。
另外,上文显示的基本功能都已经可以在Chrome Canary
中进行测试。
下载Canary
,然后转到chrome://flags
,搜索Container Queries
并启用该标志。
本文演示
的 demo 的在线链接:
https://codepen.io/rachelandr...
以及容器查询 demo 的大集合
:
https://codepen.io/collection...
目前还没有浏览器支持。
https://bugs.chromium.org/p/c...
Tracking bug:
https://bugs.chromium.org/p/c...
Chrome浏览器中提供功能后,此处列出的值不保证是最新的。
CSS 容器查询,为自适应布局方案提供了一种新的思路。
但是目前还处于提案阶段, 感兴趣的可以保持关注。
好了,本文的内容就这么多,谢谢。
最后,如果觉得内容有帮助, 可以关注下我的公众号,掌握最新动态,一起学习!
1.HTML概述 1.HTML:超文本标记语言。是一种标识性语言,非编程语言,不能使用逻...
为什么要翻译这篇说明?css2本有人已翻译过,但看一下,很粗糙(不是说自己就怎...
一、ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值。 二、同一...
在用Dreamweaver编辑网页时,经常会在某一页面中要设置许多的连接,正因为要设置...
简单写一下常见的基础图形,以及一些遇到的样式小图标 下图是css效果: 各个图形...
前言 Sass是CSS3语言的扩展,它能帮你更省事地写出更好的样式表,使你摆脱重复劳...
AmazeUI个人感觉确实蛮不错的,虽然现在还不算特别完善,但毕竟是国内首款,用起...
web前端开发中避免不了要在页面上显示很多文章,如何才能从文中,文末点击快捷的...
前面的文章算是把Bootstrap CSS部分简单的学习了一遍,应该忽视了比较多的细节问...
经过我多方查询与观察,我的web serve之所以 出现这样的问题 是因为.net framewo...