html5 – CSS中的大小单位

前端之家收集整理的这篇文章主要介绍了html5 – CSS中的大小单位前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我最后几天处理响应式网页设计和网页设计的单位.我的问题是关于CSS中的大小单位,这意味着不仅与字体大小有关,还与填充,宽度,媒体查询,…

对于大多数专业网页设计师来说,大多数用例都被认为是px.

每个人都反对px

一些文章让我得出这个假设

> http://css-tricks.com/why-ems/
> http://webdesign.about.com/cs/typemeasurements/a/aa042803a.htm
> http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/

这篇文章也有一个意见专家:
Should I use px or rem value units in my CSS?

反对px / for(r)em的原因?

媒体查询

在许多文章之后,em媒体查询的一大优势是,当使用浏览器的纯文本缩放时,甚至应用这些媒体查询.

但是我认为所有现代浏览器都支持页面缩放,这也适用于以像素定义的媒体查询(在最新的Firefox和IE中测试).

无障碍

em(或rem)似乎被推荐用于font-size(可访问性),但其他大小是什么?

增加可访问性是IMHO没有重要原因,因为现代浏览器支持页面缩放.我不知道屏幕阅读器,但我无法想象,它们在过去几年中没有得到改进.

可维护性

通过更改基本大小可以轻松更改整个站点的大小.

如果它是每个设备的持久更改,那么在使用CSS预处理器时应该非常容易.

我能找到的唯一原因是在css-tricks.com文章中,因为您可能希望在移动设备上更改所有尺寸.你真的想要这个/大多数元素吗?
对于一些像真正大标题的情况似乎很有用,但为什么移动用户能够比桌面用户更好地阅读较小的文本?另外,参考像素中的测量补偿了不同的DPI.

现实生活中的例子

我粗略地分析了他们的源代码,可能我忽略了一些事情.

Bootstrap 3

在大多数地方使用px:字体大小,填充,边距…
网格系统至少使用百分比来表示宽度.
但是,您可以在Github上找到有关此主题的许多问题.许多人要求em / rem.

ZURB基金会5

它基于rem和em,在极少数情况下它使用px,但仅用于边框等.

cloudfour.com

em中的媒体查询和字体大小以及其他所有内容的不同单元组合:px,%,em.

css-tricks.com

字体大小,边距主要在px中,但是媒体查询在em中,一些宽度在%中.

到目前为止,我到处都读过,你应该使用相对大小并且已经这样做了.如果有合理的理由(我认为是这样,因为许多专业人士这样做)我将继续/改进这样做,但它比使用px更复杂.

如果你假设大多数人都在使用整页缩放,那么px的问题在哪里,有一个一致的单位似乎很好?
(支持那些未将浏览器/设备升级近10年(IE <= 7)的人不是我的目标.) 这是要走的路? (请考虑不同的属性font-size,width,media queries,…)

解决方法

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;
}
原文链接:https://www.f2er.com/html5/168481.html

猜你在找的HTML5相关文章