CSS网格模板响应

时间:2017-11-17 09:05:15

标签: html css css3 grid css-grid

所以我正在测试CSS的grid能力,其中一件我无法想象的事情是从浏览器缩放级别以及它们中的图像行为。

e.g。如果我更改视口,那就没关系了。网格及其图像完美缩放,但有些用户使用ctrl + -cmd + -

如果使用它,图像会像它应该的那样缩放,但网格不会像我想象的那样缩放。

我创建了一个包含4列且没有行的基本网格。我不希望宽度全屏,所以我在容纳25%网格的容器上添加了一个边距。

网格位于中心内。这是一个小提琴。

https://jsfiddle.net/kagprzae/

任何人都可以看到我错过转弯的地方吗?

----半解决方案----

所以诀窍是使用绝对像素。这样您就可以使用ctrl/cmd + -

缺点是网格不再响应,因此您必须使用@media查询来更改布局......

我不确定我认为最好的做法是什么。

----完成解决方案没有JS ----

因此经过一些(大量)测试和思考后,我提出了以下解决方案。

.container一个宽度(在我的情况下我可以)并根据100%的宽度计算你的网格。

您可以margin:0 auto;div居中。

See this fiddle

0 个答案:

没有答案