Question

我正在阅读有关css的文章。我发现许多作者建议使用％值来表示div的宽度或高度。

我一直在使用像素。

为什么我要将％值用于div的宽度或高度而不是像素？

有什么好处？

Answer 1

将以下html保存到文件中，然后使用Web浏览器将其打开。现在更改Web浏览器窗口的大小，注意百分比将扩展和收缩，而像素则不会。

<!DOCTYPE html>
<html>
<head>
<title>Pixels and Percents</title>
<style>
html,body {
    margin:0;
    width:100%;
    height:100%;
    background:blue;
}

.pixels {
width:100px;
height:20px;
background:green;
}

.percent {
width:50%;
height:50%;
background:red;
}

</style>
<head>
<body>
<div class="pixels">
PIXELS
</div>
<div class="percent">
PERCENT
</div>
</body>
</html>

Answer 2

我个人不喜欢由于不一致而对主要内容区域具有％宽度的网站。对于整个网站，最好使用大约1000像素的像素宽度，可能会少一些，以便它适用于所有分辨率。

对于主要内容区域内的元素，我倾向于使用百分比宽度，因为我不想同时计算精确的像素值。无论如何，结果都是一成不变的，因为它是一个百分比的东西是不变的，而不是显示器的分辨率，这在用户之间是不同的。

总结一下：由于父元素具有固定（像素）宽度，因此只有在每个用户获得相同结果时才使用百分比。否则，您的设计会出现不一致的情况，因此您无法使用任何华丽的图像，并且对于使用巨型/微型显示器的用户来说，网站可能看起来很难看。如果您要使用百分比宽度，则只需使用不同的分辨率测试网站！

Answer 3

虽然肯定不是唯一的原因，但是使用百分比来占用一些你最初不知道容器父母宽度的东西的空间。

例如，假设我希望我的div元素始终占据观看者浏览器窗口的至少50％，我可以将其写为：

<div style="width:50%">
    This will take up 50% of the width
</div>

使用“px”以固定方式执行此操作将需要您知道浏览器的分辨率，如果您希望至少占用50％的宽度。你可以使用JavaScript来做到这一点，但CSS更容易，更快。

使用表，div和动画的其他一些示例： http://jsfiddle.net/BLQp7/1/

Answer 4

我发现不适合屏幕的网站，要么在内容边缘留下空白区域（可能相当大），要么使用滚动条从侧面掉落（或者更糟糕的是，从侧面掉下来一个滚动器！）非常讨厌。

无论屏幕有多大，我都会编写适合屏幕的页面。

Answer 5

目前尚不清楚您指的是哪种上下文（什么类型的元素）。但是，在将像素用于字体大小时需要小心。

我通常使用div的像素来保持我的布局符合预期。但我避免使用字体像素。不同的用户可能想要不同大小的字体。为什么要把它带走。

Answer 6

使用％的好处是你可以使用所有100％的用户界面，并提供最好的经验没有mattet

Answer 7

因为如果基于百分比的内容流量使得更容易实现响应式网站（更容易=（更少（时间=金钱）））。

在放入一些媒体查询后，删除相关的花车，整理菜单和其他任何内容，并且您有一个网站在处理不同的分辨率和设备。

我使用流量网格系统使用百分比和ems用于文本大小。像素更易于使用，但不具备响应性。我将我的尺寸包裹在最大宽度容器中。

PS

请记住，尽管最终归结为像素。

Answer 8

总而言之，如果您在网站上使用图片，使用百分比作为主要contianer可能不是最好的方法。在这种情况下，您需要使用像素。

建议：将Pixels用于主要contianer，将百分比用于内容。

为什么在CSS中使用div的宽度的百分比值？

8 个答案: