欢迎访问广东皇冠app叉车设备有限公司官网!

广东皇冠app叉车设备有限公司

广东皇冠app叉车设备有限公司

—— 持续领航 品牌经营 ——

全国服务热线

0285-464135128
14972167342
搜索关键词:

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

来源:皇冠app   发布时间:2021-07-27 00:04nbsp;  点击量:

本文摘要:结构和合成是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值以改变的比例适应垂直偏向。


本文关键词:皇冠app,现代,CSS,网格,解决,常见,结构,问,题的,方法

本文来源:皇冠app-www.yjycjzyzs.com

微信二维码 微信二维码
联系我们

电话:0285-464135128
手机:14972167342
Q Q:727396674
邮箱:admin@yjycjzyzs.com
联系地址:上海市上海市上海区瑞东大楼934号

Copyright © 2006-2021 www.yjycjzyzs.com. 皇冠app科技 版权所有

备案号:ICP备25688528号-4