Question

我对CSS很陌生，并且想知道是否存在某种规则/经验法则来确定何时使用不同的单位来定义布局。目前我已经在％中定义了所有内容，因为我认为这对于窗口大小调整很有用。事实并非如此，文本开始溢出，图像被搞砸等等。任何帮助都会被激活。

Answer 1

通常，我使用以下

布局 - 像素（除非某些东西需要％宽度/高度）
字体 - 像素（有时是可访问性百分比，但维护是一场噩梦）

一般来说，您可以在大多数时间使用像素。字体问题更复杂。例如，如果您希望“增加字体大小”功能在浏览器中工作而不调整页面的其余部分，则需要使用％。但是，使用％字体大小时，子元素始终会继承父字体大小，因此您将获得以下内容：

body { font-size:87%; }
h1 { font-size:87%; }

这意味着h1实际上是87％的87％。这可能很烦人。当你最终得到百分比＆gt; 100％。它变得非常厚，最好避免。

我不确定em是否以同样的方式工作，我从未详细研究过它们。

Answer 2

使用百分比使布局在不同大小的视口中工作是一种非常先进的技术，通常使用javascript动态完成。在您更熟悉CSS之前，可以查看基于工作百分比的布局并了解足以复制它，您最好坚持使用PX。

如果你要使用javascript路线，那真的很简单。首先使用jQuery，因为它比使用本机javascript更轻松地调整布局大小。然后$（窗口）.height（）;为您提供视口的高度; $（窗口）.WIDTH（）;给你宽度。您为容器设置默认的px宽度，然后对所有其他块级元素（容器，容器，侧栏，主等）使用百分比，并执行以下操作：

function percentagize() {
var height = $(window).height()-100;
var width = $(window).width()-20;
$("div#container").css({
'height' : height+'px',
'width' : width+'px',
'margin': '0 auto'
});
}

$(document).ready(function() {
percentagize();
$(window).bind('resize','percentagize');
})

Answer 3

这应该给你一个想法：http://w3schools.com/cssref/css_units.asp

％在该页面上没有正确解释，但它表示包含块的x％。

Answer 4

你应该使用ems作为字体，以便它们总是相对大小......默认情况下它们是1 em或16px ...你可以通过设置body { font-size: 75% }来设置播放，这使得1em相当于12px The PxtoEm calculator is great。从这里你可以做像

这样的事情

h1 { font-size: 3em }
p { font-size: 1em }

现在无论你设置什么，身体字体大小到h1标签总是比段落大3倍。它提供了更大的灵活性，并使您的类型层次成比例。

对于布局，它实际上取决于布局类型...对于使用中心列固定的经典，然后使用像素....对于流体或自适应布局然后使用百分比（或固定宽度的混合，即左手导航栏andpercentages）

Answer 5

尽可能使用 em ，因为这是最易维护的。 em单位取决于当前元素的字体大小，因此如果更改基本字体大小，则em-units可以缩放。

当您需要固定尺寸时，请在屏幕样式表中使用 px 。通常，您将指定基本字体的大小（以像素为单位）。图像大小也应该以px指定，因为图像不应仅仅因为您更改字体而向上或向下缩放 - 它只会使图像模糊。边框厚度也应该以像素为单位指定，因为您不希望它依赖于字体大小。

仅在 pt ， pc ，， cm ， mm 中使用打印媒体样式表。你可能不会在相同的样式表中混合公制和英制，所以决定in或cm / mm。

％很棘手，因为根据属性，它意味着不同的东西。对于字体大小，100％= 1em，所以如果你喜欢％或em，它只是一个偏好的问题。（我更喜欢em用于字体大小，因为％在其他上下文中具有不同的含义。）但它不受窗口缩放的影响。字体大小不随窗口大小而变化，也不是em或％单位。

对于框上的宽度和高度，％表示父框大小的百分比，根元素的大小取决于窗口大小。这听起来没那么有用！例如，如果您的文本流没有任何指定的宽度，则这些行将变得太长而无法轻松读取。如果你指定文本框的宽度，你可以在任何屏幕上给它一个很好的可读行长度。但是如果你以％表示宽度，它将随着窗口的大小而缩放，这意味着它在某些屏幕上仍然可能太长而在其他屏幕上也会缩短。从理论上来说，缩放窗口大小听起来不错，但很少是你想要的。

何时使用％，px，em等...？

5 个答案: