我正在尝试创建一个准确的Photoshop网格 . 我知道基础是响应的,像素大小会根据调整大小而有所不同 . 但是,我想设计的图像和容器将根据我开始时的精确比例进行精确扩展 . 为此,我想了解浏览器如何实际构建这些列和装订线以及分配给每个空间的大小,包括不完整的列和外部空间 .

enter image description here

我从1025分辨率(大屏幕断点)开始,我尝试使用http://gridcalculator.dk/#/1024/12/30/30创建一个网格

我想象在1025尺寸上有这些比例,但我不知道:

问题1-基金会创造了多少个排水沟?是否有自动添加到网格末端的外部装订线或边距?

问题2-列大小是否始终相同,或者其中一个在奇怪的大小中变成不同的大小?

问题3-外部区域的大小是多少?

然后我试着在代码笔中找到一些例子,我注意到以下内容:
enter image description here

A-在浏览器中渲染时没有可见的排水沟,至少在这个例子中B-当从1200水平屏幕伸展到2000(我的显示器)时,列空间似乎保持相同的宽度(1200),所以它总是网格占用空间的固定宽度为1200,但收缩时会发生变化 .

在这种情况下,它让我认为大屏幕上的实际网格大小为1200,具有以下配置:

有外部排水沟/边缘

with external gutter/margin

没有外部排水沟/边缘

without external gutter/margin

然而,对我来说仍然不清楚,因为当在代码笔上呈现时它没有显示阴沟,它们是否因某些原因在这些尺寸上崩溃了?