我正在读关于CSS的文章.我发现许多作者建议使用%值来表示div的宽度或高度.
我一直在使用像素.
为什么我应该使用%的值来表示div的宽度或高度而不是像素？
有什么好处？
我个人不喜欢由于不一致而对主要内容区域具有%宽度的网站.对整个网站来说,最好使用大约1000像素的像素宽度,可能会少一些,这样它就适用于所有分辨率.
至于主要内容区域内的元素,我倾向于使用百分比宽度,因为我不想同时计算精确的像素值.无论如何,结果都是一成不变的,因为它是一个百分比的东西是不变的,而不是显示器的分辨率,这在用户之间是不同的.
总结一下:由于父元素具有固定(像素)宽度,因此仅在每个用户获得相同结果时使用百分比.否则,您的设计会出现不一致的情况,因此您无法使用任何华丽的图像,并且对于使用巨型/微型显示器的用户来说,网站可能看起来很难看.如果您要使用百分比宽度,您只需要使用不同的分辨率测试网站!
将以下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>