许多响应式网页设计的学生很难使用百分比来表示宽度值。具体而言，浏览器如何计算这些百分比存在混淆。您可以在下面找到有关百分比如何在响应式网站中进行宽度计算的详细说明。
使用像素作为宽度值
当您使用像素作为宽度值时，结果非常简单。如果使用CSS将文档标题中元素的宽度值设置为100像素宽，则该元素的大小与在网站的内容或页脚或其他区域中设置为100像素宽的元素相同。页。像素是绝对值，因此无论文档中元素出现在何处，100像素都是100像素。不幸的是，虽然像素值很容易理解，但它们在响应式网站上效果不佳。
Ethan Marcotte创造了“响应式网页设计”一词，将此方法解释为包含3个关键原则：
- 流体网格
- 流体介质
- 媒体查询
前两个点，流体网格和流体介质是通过使用百分比而不是像素来确定尺寸值来实现的。
使用百分比表示宽度值
使用百分比为元素建立宽度时，元素显示的实际大小将根据文档中的位置而有所不同。百分比是相对值，表示显示的大小与文档中的其他元素相关。
例如，如果将图像的宽度设置为50％，则不会 意味着图像将以正常尺寸的一半显示。这是一个普遍的误解。
如果图像本身为600像素宽，则使用CSS值将其显示为50％并不意味着它在Web浏览器中将为300像素宽。此百分比值是根据包含该图像的元素计算的，而不是图像本身的原始大小。如果容器（可能是分区或其他HTML元素）的宽度为1000像素，则图像将以500像素显示，因为该值是容器宽度的50％。如果包含元素的宽度为400像素，则图像将仅显示200像素，因为该值为容器的50％。这里讨论的图像有50％的大小，完全取决于包含它的元素。
请记住，响应式设计是流动的。布局和尺寸将随着屏幕尺寸/设备的变化而变化。如果你用物理的，非网络的术语来思考这个问题，就像有一个纸箱装满了包装材料。如果您说盒子应该是半满的材料，您需要的包装数量将根据盒子的大小而有所不同。对于网页设计中的百分比宽度也是如此。
基于其他百分比的百分比
在图像/容器示例中，我们使用包含元素的像素值来显示响应图像的显示方式。实际上，包含元素也将被设置为百分比，并且该容器内的图像或其他元素将基于百分比的百分比获得其值。
这是另一个在实践中表明这一点的例子。
假设您有一个网站，其中整个网站包含在一个部门中，其中包含一类“容器”（一种常见的网页设计实践）。在该部门内部是另外三个部门，您最终将其设计为显示为3个垂直列。 HTML可能如下所示：
现在，您可以使用CSS将“容器”部分的大小设置为90％。在此示例中，容器除法除了正文之外没有包围它的另一个元素，我们没有将其设置为任何特定值。默认情况下，正文将呈现为浏览器窗口的100％。因此，“容器”部门的百分比将基于浏览器窗口的大小。随着浏览器窗口大小的改变，这个“容器”的大小也会改变。因此，如果浏览器窗口宽度为2000像素，则此分区将显示为1800像素。这计算为2000的90％（2000 x .90 = 1800）），这是浏览器的大小。 如果在“容器”中找到的每个“col”分区被设置为30％的大小，则在该示例中它们中的每一个将是540像素宽。这计算为容器渲染的1800像素的30％（1800 x .30 = 540）。如果我们更改了该容器的百分比，这些内部分区也将在它们呈现的大小上发生变化，因为它们依赖于包含该元素的内容。 我们假设浏览器窗口仍然是2000像素宽，但我们将容器的百分比值更改为80％而不是90％。这意味着它现在将以1600像素宽度渲染（2000 x .80 = 1600）。即使我们没有为我们的3“col”分区的大小更改CSS，并将它们保留为30％，它们现在将以不同的方式呈现，因为它们的包含元素（它们的大小由它们调整的上下文）已经改变。这3个分区现在将呈现为480像素宽，即1600的30％，或容器的大小（1600 x .30 = 480）。 更进一步，如果在这些“col”分区之一中有一个图像并且该图像使用百分比来确定大小，则其大小调整的上下文将是“col”本身。随着“col”分区的大小改变，其中的图像也会改变。因此，如果浏览器或“容器”的大小发生变化，那将影响三个“col”分区，这反过来会改变“col”内部图像的大小。正如您所看到的，这些都是在涉及百分比驱动的尺寸值时连接。 当您考虑当百分比值用于宽度时网页内部元素将如何呈现时，您需要了解该元素在页面标记中所处的上下文。 百分比在为响应式网站创建布局方面发挥着关键作用。无论您是响应性地调整图像大小还是使用百分比宽度来制作尺寸相对于彼此的真正流畅网格，理解这些计算对于实现您想要的外观都是必要的。 综上所述
