3

我对 CSS 很陌生,想知道是否有某种规则/经验法则来确定何时使用不同的单位来定义布局。目前我已经在 % 中定义了所有内容,因为我认为这对调整窗口大小有好处。情况并非如此,文本开始溢出,图像被弄乱等等。任何帮助将不胜感激。

4

5 回答 5

2

通常,我使用以下

  • 布局 - 像素(除非某些东西需要是 % 宽度/高度)
  • 字体 - 像素(有时为可访问性百分比,但维护起来是一场噩梦)

一般来说,您可以在大多数情况下使用像素。字体问题是一个更复杂的问题。例如,如果您希望“增加字体大小”功能在浏览器中工作而不调整页面其余部分的大小,则需要使用 %'s。但是,当使用 % 字体大小时,子元素总是继承父元素的字体大小,因此您会得到以下结果:

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

这将意味着h1实际上是 87% 的 87%。这可能很烦人。当你最终得到百分比 > 100% 时。它会很快变厚,最好避免。

我不确定他们的工作方式是否相同,我从未详细研究过它们。

于 2011-07-07T21:46:27.327 回答
1

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

如果你要走javascript路线,那真的很简单。首先使用 jQuery,因为与尝试使用原生 javascript 相比,它使调整布局大小变得轻而易举。然后 $(window).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');
})
于 2011-07-07T21:37:09.117 回答
0

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

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

于 2011-07-07T21:37:02.753 回答
0

您应该将 em 用于字体,以便它们始终相对大小...默认情况下它们是 1 em 或 16px...您可以通过设置body { font-size: 75% }使 1em 相当于 12px来设置玩这个PxtoEm 计算器很棒。从这里你可以做类似的事情

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

现在,无论您将主体字体大小设置为 h1 标签,它总是比段落大 3 倍。它提供了更大的灵活性,并使您的类型层次保持成比例。

对于布局,它实际上取决于布局类型...对于带有中央列的经典固定然后使用像素....对于流体或自适应布局然后使用百分比(或固定宽度的混合,即左侧导航栏和百分比)

于 2011-07-08T00:04:02.053 回答
0

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

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

仅在打印媒体样式表中使用ptpcincmmm 。您可能不会在同一个样式表中混合使用公制和英制,因此请选择 in 或 cm/mm。

%很棘手,因为它的含义因属性而异。对于字体大小,100% = 1em,所以如果你喜欢 % 或 em,这只是一个偏好问题。(我更喜欢 em 作为字体大小,因为 % 在其他上下文中具有不同的含义。)但它不受窗口缩放的影响。字体大小不随窗口大小缩放,em 或 % 单位也不缩放。

对于框的宽度和高度,% 指的是父框大小的百分比,对于根元素,它取决于窗口大小。这比听起来的用处要小得多!例如,如果您有一个没有任何指定宽度的文本流,那么这些行将变得太长而无法舒适地阅读。如果您在 em's 中指定文本框的宽度,您可以在任何屏幕上给它一个可读的行长。但是,如果您以 % 为单位指定宽度,它将随窗口大小缩放,这意味着它在某些屏幕上仍然可能太长,而在其他屏幕上可能会变短。用窗口大小缩放在理论上听起来不错,但很少是你想要的。

于 2015-05-10T09:54:30.583 回答