如何构建一个完美缩放的UI界面

这是一个很有意思的话题,仅从标题中我们可以得到两个关键词 完美缩放。对于 Web 前端开发者而言,特别对于 UI 还原方面(天朝称“切图”,国外称“UI Developer”)更多追求的是像素级还原(即“Pixel-Perfect”),但随着更多的移动终端出现之后,特别更多的业务重心放到移动端之后,Web 开发者把更多的重心放在移动端。为此在业内出现了更多有关于移动端适配的方案,比如 Rem适配VW适配 等。但这些都离我们所说的像素级还原目标越来越远。换句话说,如果我们既要(像素级还级)又要(完美缩放或适配),该怎么办呢?如果你对该话题感兴趣,那么接下来的内容值得你花一定时间阅读。

系统偏好设置的那些事儿

如果你阅读过早前分享过的《CSS媒体查询新特性》和《给网站添加暗黑模式》相关的文章,就可能想到了今天这篇文章大致和大家要聊的是些什么东西。事实上也的确如此,但或许和想象的略有差异,因为在这篇文章和大家聊的并不是 CSS 的媒体查询,也不是教大家怎么给网站添加暗黑模式的主题。如果是这样的话,就有点对不起大家了,大家也会觉得我在不断的炒冷饭。接下来要和大家聊的虽然也和 CSS 有关联,但对于很多同学来说,还是很新,很有意思的东西。感兴趣的同学请继续往下阅读。

图解CSS: Grid布局(Part11)

既然 CSS Grid 布局已经来到我们的身边,我们开始在网上看到越来越多的类似于杂志式的 Web 布局。这并不是不可能的,如果你经常关注 Codepen 的话,你会发现在该平台上有很多类似杂志式的布局。这一切都是有原因的: 它们干净、可读、有吸引力,而且令人熟悉。甚至说,在未来的某一天(这个时间不会太久),你就会接到这样的需求,创建一个类似杂志的布局。 CSS Grid 的到来,让这一切已变得非常的容易,因为 CSS Grid 是一个非常强大的布局系统(通过前面的学习,或许你已经有感知了),可以用于创建复杂、独特的二维布局。而一个类似杂志式的布局有着其自身最大的特征,尤其是使用 CSS Grid 构建一个杂志式的布局更是如此:“将 Web 内容组织成一个结构良好的网格” 和“用重叠的网格项目来突破网格”。对于这两点,CSS Grid 都占有绝对的优势,在 CSS Grid 布局中,我们可以使用网格项目的重叠和定位,使用偏移(inset,即toprightbottomleft)、负边距(margin)和变换(transform)来构构建。但是,在 CSS Grid 中,可以使用更有 逻辑性可读性 的属性和值来建立定位叠加的元素。接下来的内容,我们将围绕着这方面来展开。

图解CSS: Grid布局(Part10)

在 CSS 网格中除了使用明确指定网格项目位置的属性之外,还可以使用grid-auto-flow有不同模式来自动放置网格项目。到目前为止,我们所阐述的网格项目都是用不同的网格区域来放置网格项目,但网格布局中的网格项目有可能是会重叠在一起的。那么接下来的一节中,将和大家一起来探讨网格项目重叠和定位相关的知识。

图解CSS: Grid布局(Part9)

前面花了很多篇幅和大家一起探讨了 CSS 网格布局系统中的一些重要概念,并且深入探讨了运用于网格容器上属性的知识和使用。不过我们只围绕着 grid-template-rowsgrid-template-columnsgrid-template-areasgrid-auto-rowsgrid-auto-columnsgrid-ato-flow 展开,对于子网格、瀑布流以及对齐等相关的话题并未展开,留到后面再做探讨。在学习运用于网格容器上属性的时候,在相关的示例中用到了用于网格项目的属性,比如grid-rowgrid-columngrid-area等,并且还多次提到网格项目放置这个概念。或许你对它们的使用有了一个基本的了解,但要彻底掌握他们,我们还是很有必要花更多的时间来学习和探讨。

图解CSS: Grid布局(Part8)

在 CSS 网格系统中,网格线是一个非常重要的概念。默认情况之下,只要定义了一个网格系统,就会默认创建以数字为索引号的网格线名称(行网格线名称和列网格线名称)。除此之外,还要以在 grid-template-columnsgrid-template-rows 中显式的在中括号[]中给网格线指定名称。通过前面章节的学习,CSS 网格系统中有显式网格和隐式网格之分,同样的,网格线也有显式网格线和隐式网格线之分,位于显式网格上的网格线被称为显式网格线,位于隐式网格上的网格线被称为隐式网格线。而且在网格系统中,明确放置网格项目时离不开网格线,换句话说,网格线命名的好不好直接会影响我们网格项目放置。在这篇文章中将主要和大家探讨网格线怎么命名?感兴趣的请继续往下阅读。

图解CSS: Grid布局(Part7)

Part6 和大家一起探讨了在网格布局中怎么使用 grid-auto-columnsgrid-auto-rows 以及 grid-rowgrid-columngrid-area 创建隐式网格。在使用 grid-rowgrid-columngrid-area 放置网格项目的时候,有可能会造成网格缺口出现。在网格布局中,我们可以使用 grid-auto-flow 属性让网格项目更好的被放置到网格单元格上。这篇文章主要和大家探讨了网格项目自动放置属性 grid-auto-flow 的基本语法和自动放置规则等特性,感兴趣的继续往下阅读。

2021年你可能不知道的 CSS 特性

记得去年整理一篇也是关于 CSS 新特性方面的内容,即《2020年CSS有哪些新特性》。这回在 T(X) Team.午夜识堂 也和大家一起聊了一些 CSS 新特性方面的话题,主要是帮助团队同学能拓展一下 CSS 方面的新知识。虽然聊的是“新特性”,但其中有些特性并不怎么“新”,或许已在你的项目中,或许已接触过,只是不太了解而以。接下来,就和大家一起来简单地回顾一下这些特性,希望大家能喜欢,也希望对大家平时工作有所帮助。

图解CSS: Grid布局(Part6)

CSS 网格布局中有 显式网格隐式网格 之分,在 CSS 网格布局中可以使用 grid-template-columnsgrid-template-rowsgrid-template-areas 可以定义显式网格,并且可以定义显式网格固定的网格轨道数量,同时 grid-template-columnsgrid-template-rows 可以用来显式指定网格轨道尺寸。而在 CSS 网格布局中,可以在网格容器上使用 grid-auto-columnsgrid-auto-rowsgrid-auto-flow 可以显式定义隐式网格,并且 grid-auto-columnsgrid-auto-rows 可以用来指定隐式网格轨道的尺寸。那么在这篇文章中,主要和大家一起探讨在 CSS 网格布局中如何定义隐式网格和指定隐式网格轨道尺寸。

图解CSS: Grid布局(Part5)

前面花了两个章节(Grid布局 Part3Part4)介绍了在grid-template-columnsgrid-template-rows 中使用固定长度值,动态值和一些关键词来设置网格轨道的大小。除了这些之外,还可以使用一些函数,比如minmax(min, max)repeat() 等来设置网格轨道大小。在这一章节点,主要围绕着在 grid-template-columnsgrid-template-rows 属性中如何使用函数(minmax(min, max)repeat())设置网格轨道尺寸,感兴趣的话,请继续往下阅读。

页面

返回顶部