html 页面长度单位,html5 – CSS中的大小单位

TL; DR：

>使用％进行水平页面布局

> em非常适合垂直间距

>使用你喜欢的任何字体大小(我喜欢它)

>使用em进行媒体查询

CSS测量单位

我发现我对不同CSS测量单位的使用随着我正在处理的测量区域而变化：水平,垂直,排版或媒体查询.

水平测量

水平空间为页面提供结构.因此,水平测量与单位相对于页面宽度(％)的效果很好.例如,它可以为主要内容提供一些基本的喘息空间：

#main {

width: 90%;

margin: 0 auto;

}

当一个或所有水平测量与页面或其容器成比例时,更复杂的布局(例如,列)也可以很好地工作.

.column-main {

width: 61.8%; /* The golden ratio is pretty awesome. */

}

.column-secondary {

width: 38.2%;

}

这个想法有一个必然结果,即如果你很好地设置你的容器结构,you won’t have to do much horizontal sizing on the contents.你基本上让块级元素填充容器的宽度,就像他们喜欢做的那样,你们都已经完成了设置.

垂直测量

垂直空间更多地是关于内容的结构(即文档流中的元素彼此有多接近),并且我认为这些测量对于固定和相对单位(px或em)都可以正常工作.

但是,在这里使用相对单位有助于给你一个vertical rhythm,这可能非常令人愉快.它还允许您更改内容(读取：字体大小)并保持垂直间距成比例.

p, ul, ol, dl {

margin: 0 1em; /* gives you proportional spacing above and below,

no matter the font size */

}

印刷测量

字体测量属于他们自己的类别,可能是因为font-size充当了em中所有其他测量的基础.我见过不同策略的倡导者,但从我看到的任何测量都可以正常工作,只要你知道你在做什么.

PX

在px中设置font-size非常可靠且易于计算.在IE6之后的时代,它也可以很好地扩展,所以如果你喜欢这个,那么就没有理由不使用px.

我在使用px时遇到的唯一问题是它没有利用CSS级联.换句话说,一旦我在px中指定了大小,如果我想进行任何大规模的更改,我必须返回并单独更改它们中的每一个.

EM

尽管有任何缺点,我认为em可以是指定font-size的一种非常好的方法.我喜欢的是它让我快速看到我的字体大小之间的关系.很多时候我并不关心字体的确切大小,因为对我来说最重要的是该大小与页面上所有其他大小的关系.

使用em的重要一点是将大小设置为尽可能接近结束标记.这意味着我避免在容器上设置字体单位：

aside { font-size: 0.8em; } /* This can mess me up */

...

aside p { font-size: 0.8em; } /* Way too small! */

主要是在标题和文字项目上设置尺寸：

h1 { font-size: 2.5em; }

h2 { font-size: 2.1em; }

h3 { font-size: 1.7em; }

...

无论如何,我喜欢我能清楚而轻松地看到那里尺寸之间的关系.

REM

根据浏览器的基本字体大小调整大小似乎是Web标准的事情,因为那样你就允许最佳基本字体大小可能不是16px的浏览器.但在实践中,它的另一种方式是有效的.从我所看到的,浏览器使用16px作为基本字体大小,因为这是每个人都期望的,并且将CSS测量的实际大小设置为在浏览器中看起来不错.

我看到的最大缺点是browser support.如果您为不支持rem的浏览器编码,您将添加两次规则：

p {

font-size: 16px;

font-size: 1rem; /* I kind of hate repeating myself here,

but a good CSS preprocessor might ease that pain. */

}

字体间距

由于大多数其他字体测量属于垂直或水平测量的类别,因此在获得字体大小后,其他字体测量更容易弄清楚.例如：

h1 {

font-size: 2.5em; /* Change this, and everything below stays proportional.

(Use whatever measurement unit you prefer.) */

margin-top: 0.618em;

margin-bottom: 0.3em;

line-height: 1.2; /* The only unit-less measure in CSS */

}

媒体查询

在大多数情况下,浏览器在媒体查询中处理em和px的方式几乎没有区别.即使用户使用文本缩放来调整页面大小,这也适用.

但是,如果有人在浏览器设置中更改了默认文本大小,则表现方式会有很大不同. See my answer to a related question和我的codepen demo进行了更长时间的解释.

简而言之,虽然在大多数情况下px适用于媒体查询,但使用em肯定更安全.

其他情况

当然,上述一般性评论不适用.例如,您可能会发现只要您想要与字体大小成比例的东西,ems就会派上用场,如下所示：

h1.title {

font-size: 2em;

width: 20em; /* Resizing the font also resizes its container properly. */

background-color: #d00d1e;

}

@media (min-width: 400px) {

h1 {

font-size: 2.5em; /* Woot! Didn't have to touch the width! */

}

}

或者您可能希望限制行长度以便于阅读：

p {

max-width: 42em;

}

另外,正如其他评论中所提到的,px仍适用于边界和类似的东西.它也可以用于填充,特别是当你将它与盒子大小配对时：

.example {

width: 80%;

box-sizing: border-box; /* Padding is NOT added to total width. Huzzah! */

padding: 10px;

}