html响应式百分比怎么计算,厦门网站设计之响应式网站中宽度计算的百分比如何工作...

网络浏览器如何使用百分比值确定显示

许多响应式网页设计的学生   在宽度值上使用百分比是困难的时刻。具体来说，浏览器如何计算这些百分比有困惑。下面你将会找到一个详细的说明，说明百分比如何在响应式网站上进行宽度计算。

使用像素的宽度值

当使用像素作为宽度值时，结果非常简单。如果您使用CSS将文档标题中的元素的宽度值设置为100像素宽，则该元素将与您在网站的内容或页脚或其他区域中设置为100像素宽的元素的大小相同页。

像素是一个绝对值，所以100像素是100像素，无论文档中出现某个元素。不幸的是，虽然像素值很容易理解，但它们在响应式网站上的工作效果不佳。

Ethan Marcotte创造了 “响应式网页设计” 这一术语，解释这个方法包含3个主要原则：

流体网格

流体介质

媒体查询

通过使用百分比而不是像素来确定尺寸值来实现流体网格和流体介质的前两点。

使用宽度值的百分比

当您使用百分比来为元素建立宽度时，元素显示的实际大小将根据文档的位置而有所不同。百分比是相对值，意味着显示的大小与文档中的其他元素相关。

例如，如果将图像的宽度设置为50％，则这并不意味着图像将以正常大小的一半显示。

这是一个常见的误解。

如果一个图像本身是600像素宽，那么使用CSS值将其显示为50％并不意味着它在网络浏览器中将是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像素(1800 x .30 = 540)的30％计算的。如果我们更改了该容器的百分比，这些内部分区也将改变它们呈现的大小，因为它们依赖于该包含元素。

我们假设浏览器窗口保持2000像素宽，但我们将容器的百分比值更改为80％而不是90％。这意味着它现在将呈现1600像素宽(2000 x .80 = 1600)。即使我们不改变我们3“col”分区大小的CSS，并将它们保留在30％，它们将以不同的方式呈现，因为它们的包含元素(它们的大小)被改变了。这三个部门现在将呈现480像素宽度，即1600的30％，或容器的大小(1600 x .30 = 480)。

更进一步地，如果这些“col”部门之一存在图像，并且图像的大小采用百分比，则其大小的上下文将是“col”本身。随着“col”部门的大小变化，内部的图像也会变化。因此，如果浏览器或“容器”的大小发生变化，那将影响三个“col”部门，从而改变“col”中的图像大小。如您所见，这些都是连接的它涉及百分比驱动的大小值。

当您考虑当使用百分比宽度时网页中的元素将如何呈现，您需要了解该元素驻留在页面标记中的上下文。

综上所述

百分比在创建响应式网站的布局方面发挥了关键作用。无论您是响应性地调整图像或使用百分比宽度，以形成一个真正流畅的网格，其大小相对于彼此，了解这些计算将是实现您所需要的外观所必需的。