现代CSS网格解决常见结构问题的方法

作者:亚搏手机版app下载发布时间:2021-11-21 00:46

本文摘要:结构和合成是CSS中最具挑战性的主题。尤其是当您必须思量响应能力时。我们经常使用媒体查询的技术。 可是,为种种断点添加许多媒体查询可能会使CSS无法维护。可是,通过添加网格,我们可以克服媒体查询的疲劳。不仅使我们的CSS更易于维护,而且还改善了用户体验。 我们可以让CSS处置惩罚可用空间。在本文中,我将先容三种可以改善您(小我私家)网站的结构实现。动态居中结构我们都知道margin: 0 auto可以实现居中结构。 可是,如果您希望图像之类的元素凌驾文章的最大宽度怎么办?

亚搏手机版app下载

结构和合成是CSS中最具挑战性的主题。尤其是当您必须思量响应能力时。我们经常使用媒体查询的技术。

可是,为种种断点添加许多媒体查询可能会使CSS无法维护。可是,通过添加网格,我们可以克服媒体查询的疲劳。不仅使我们的CSS更易于维护,而且还改善了用户体验。

我们可以让CSS处置惩罚可用空间。在本文中,我将先容三种可以改善您(小我私家)网站的结构实现。动态居中结构我们都知道margin: 0 auto可以实现居中结构。

可是,如果您希望图像之类的元素凌驾文章的最大宽度怎么办?我们可以通过负margin实现。但这仅适用于大屏幕。在小屏幕上,负边距会破坏您的网站。因此,我们必须添加许多媒体查询,以确保在所有屏幕尺寸上都能到达预期效果。

可是现在,我们有了很酷的效果,如下图所示:article { display: grid; grid-template-columns: minmax(2rem, 1fr) minmax(auto, 65ch) minmax(2rem, 1fr);}/* Center all children */article > * { grid-column: 2;}/* Wider & centered images */article > img { grid-column: 1 / 4; justify-self: center; width: 100%; max-width: 100ch;}在较小的屏幕上,应该淘汰空间的浪费,而在较大的屏幕上,更多的填充可以改善视觉质量。可是使用上述解决方案,您仍然需要媒体查询。我们可以更换2rem喜欢的工具calc(1rem + 1 * var(--ratio))。

这样,当屏幕尺寸更改时,侧边填充会自动更改,而无需媒体查询。现在,我们的文章有了一个动态且可维护的结构。响应式多列网格系统通常使用Bootstrap网格系统或自己的实现来解决此问题。

亚搏手机版app下载

可是,这将您限制为每种屏幕尺寸的牢固列数。如果您有五列,则在十二列系统中是不行能的。

此外,您必须为每个元素确定列在差别屏幕尺寸上的跨度。幸运的是,这些天我们有了CSS网格。

对于CSS网格,我们没有为每个元素界说列跨度。相反,我们让浏览器确定屏幕上的列数。您可以使用下面的代码段实现所示的可扩展结构。

让我们剖解一下!.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); width: 100%;}这就是所谓的RAM模式:重复,自动,最小最大。使用minmax(20rem, 1fr),每列的最小宽度为20rem,但会在较大的屏幕上缩放。通过auto-fill,我们让浏览器确定屏幕上可用列的数量。

使用auto-fill和minmax(20rem, 1fr)在90rem浏览器的屏幕上时,将建立四列。当只有两个元素要放入网格时,auto-fit将列数淘汰到两列。这使您在响应式结构中具有极大的灵活性,而无需使用媒体查询。双向卡结构您经常会看到大的卡片结构,其中的图像和内容相互相邻,横跨很大的水平空间。

通常它们之间具有牢固比率(例如50%-50%)。减小屏幕尺寸时,酿成相互叠放。.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); width: 100%; grid-template-rows: auto 1fr;}它险些与上一个结构相同。不外我们需要添加grid-template-rows: auto 1fr到grid类示例中。

该auto值以改变的比例适应垂直偏向。


本文关键词:现代,CSS,网格,解决,常见,亚搏手机版官网,结构,问,题的,方法

本文来源:亚搏手机版app下载-www.jngcqcz.com