响应式网站中的百分比宽度如何计算

许多人在设计响应式网页时最头疼的就是使用百分比来表示宽度值。因为在实际当中浏览器计算这些百分比时很容易出现混淆。一般我们常见的就是使用CSS来进行设定。但大家仍然要了解响应式网站中的百分比宽度如何计算,您可以在下面找到有关百分比宽度计算的详细说明。

使用像素作为宽度值

当您使用像素作为宽度值时，结果非常简单。如果使用CSS将文档标题中元素的宽度值设置为100像素宽，则该元素的大小与在网站的内容或页脚或其他区域中设置为100像素宽的元素相同。页。像素是绝对值，因此无论文档中元素出现在何处，100像素都是100像素。不幸的是，虽然像素值很容易理解，但它们在响应式网站上效果不佳。

使用百分比表示宽度值

 使用百分比为元素建立宽度时，元素显示的实际大小将根据文档中的位置而有所不同。百分比是相对值，表示显示的大小与文档中的其他元素相关。例如如果将图像的宽度设置为50％，则这并不 意味着图像将以正常大小的一半显示。这是一个普遍的误解。

 如果图像本身为600像素宽，则使用CSS值将其显示为50％并不意味着它在Web浏览器中将为300像素宽。此百分比值是根据包含该图像的元素计算的，而不是图像本身的原始大小。如果容器（可能是分区或其他HTML元素）的宽度为1000像素，则图像将以500像素显示，因为该值是容器宽度的50％。如果包含元素的宽度为400像素，则图像将仅显示200像素，因为该值为容器的50％。这里讨论的图像有50％的大小，完全取决于包含它的元素。

 请记住响应式设计是流动的。布局和尺寸将随着屏幕尺寸/设备的变化而变化。如果你用物理的，非网络的术语来思考这个问题，就像有一个纸箱装满了包装材料。如果您说盒子应该是半满的材料，您需要的包装数量将根据盒子的大小而有所不同。对于网页设计中的百分比宽度也是如此。

 基于其他百分比的计算

在图像/容器示例中，我们使用包含元素的像素值来显示响应图像的显示方式。实际上，包含元素也将被设置为百分比，并且该容器内的图像或其他元素将基于百分比的百分比获得其值。