了解Web浏览器如何使用百分比值确定显示
响应式网页设计的许多学生在使用百分比宽度值时遇到困难。 具体而言，浏览器如何计算这些百分比存在混淆。 以下您可以在响应式网站中找到有关百分比如何用于宽度计算的详细说明。
使用像素宽度值
将像素用作宽度值时，结果非常直观。 如果您使用CSS将文档标题中元素的宽度值设置为100像素宽，则该元素将与您在网站内容或页脚或其他区域中设置为100像素宽的元素具有相同的尺寸页。 像素是绝对值，因此无论文档中元素出现在哪里，100像素都是100像素。 不幸的是，尽管像素值很容易理解，但它们在响应式网站中效果不佳。
Ethan Marcotte提出了“响应式网页设计”一词，解释了这种方法包含三个关键原则：
- 流体网格
- 流体介质
- 媒体查询
流体网格和流体介质的前两点是通过使用百分比而不是像素来确定尺寸值。
使用宽度值的百分比
当使用百分比为元素建立宽度时，元素显示的实际大小将根据文档在何处显示而有所不同。 百分比是一个相对值，这意味着显示的大小相对于文档中的其他元素。
例如，如果将图像的宽度设置为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×0.30 = 540）。 如果我们改变了容器的百分比，那么这些内部分区的大小也会随着渲染的大小而变化，因为它们依赖于包含元素。
我们假设浏览器窗口保持在2000像素宽，但我们将容器的百分比值更改为80％，而不是90％。 这意味着它现在将呈现1600像素宽度（2000 x .80 = 1600）。 即使我们不改变CSS的3个“col”分区的大小，并将它们保持在30％，它们现在的渲染方式也会不同，因为它们的包含元素（它们所依据的上下文）已发生变化。 现在这三个部门的渲染宽度将分别为480像素宽度，即1600的30％或容器的大小（1600 x .30 = 480）。
更进一步说，如果这些“col”分区中有一个图像，并且该图像使用了一个百分比，则其大小的上下文将是“col”本身。 随着“col”分区的大小发生变化，其内部的图像也会发生变化。 因此，如果浏览器或“容器”的大小发生变化，这会影响三个“col”分区，这反过来会改变“col”内部图像的大小。正如您所看到的，这些都是连接的时候它涉及到百分比驱动的尺寸值。
当您考虑如何使用百分比值来显示网页中的元素时，您需要了解该元素驻留在网页标记中的上下文。
综上所述
百分比在为响应式网站创建布局方面起着至关重要的作用。 无论是响应式地调整图像大小，还是使用百分比宽度来制作尺寸相对于彼此的真正流动网格，理解这些计算对于实现您所期望的外观都是必要的。