Nik*_*ter 8 html5 accessibility typography css3 responsive-design
我最后几天处理响应式网页设计和网页设计的单位.我的问题是关于CSS中的大小单位,这意味着不仅与字体大小有关,还与填充,宽度,媒体查询,...
对于大多数专业网页设计师来说,大多数用例都被认为是px.
一些文章让我得出这个假设
这篇文章也有一个意见专家: 我应该在CSS中使用px或rem值单位吗？
在许多文章之后,em媒体查询的最大优势是,当使用浏览器的纯文本缩放时,甚至应用这些媒体查询.
但是我认为所有现代浏览器都支持全页面缩放,这也适用于以像素定义的媒体查询(在最新的Firefox和IE中测试).
em(或rem)似乎推荐用于font-size(可访问性),但其他大小是什么？
增加可访问性是IMHO没有重要原因,因为现代浏览器支持整页缩放.我不知道屏幕阅读器,但我无法想象,他们在过去几年里没有得到改进.
通过更改基本大小可以轻松更改整个站点的大小.
如果它是每个设备的持久更改,那么在使用CSS预处理器时应该非常容易.
我能找到的唯一原因是在css-tricks.com文章中,因为您可能希望在移动设备上更改所有尺寸.你真的想要这个/大多数元素吗？对于某些像大标题这样的情况似乎很有用,但为什么移动用户能够比桌面用户更好地阅读较小的文本？另外,参考像素中的测量补偿不同的DPI.
我粗略地分析了他们的源代码,可能我忽略了一些事情.
在大多数地方使用px:字体大小,媒体查询,填充,边距...网格系统至少使用百分比宽度.但是,您可以在Github上找到有关此主题的许多问题.许多人要求em/rem.
它基于rem和em,在极少数情况下它使用px,但仅用于边框等.
em中的媒体查询和字体大小以及其他所有内容的不同单元组合:px,%,em.
字体大小,填充,边距主要在px中,但是em中的媒体查询和%中的一些宽度.
到目前为止,我到处都读过,你应该使用相对大小并且已经这样做了.如果有合理的理由(我认为是这样,因为许多专业人士这样做)我将继续/改进这样做,但它比使用px更复杂.
如果你假设大多数人都在使用整页缩放,那么px对于所有内容的问题在哪里,拥有一个一致的单位似乎很好？(支持那些未将浏览器/设备升级近10年(IE <= 7)的人不是我的目标.)
这是要走的路？(请考虑不同的属性font-size,width,media queries,...)
%用于水平页面布局em 适用于垂直间距font-size(我喜欢em)em媒体查询我发现我对不同CSS测量单位的使用随着我正在处理的测量区域而变化:水平,垂直,排版或媒体查询.
水平空间为页面提供结构.因此,水平测量与单位相对于页面宽度(%)的效果很好.例如,它可以为主要内容提供一些基本的喘息空间:
#main {
width: 90%;
margin: 0 auto;
}
当一个或所有水平测量与页面或其容器成比例时,更复杂的布局(例如,列)也可以很好地工作.
.column-main {
width: 61.8%; /* The golden ratio is pretty awesome. */
}
.column-secondary {
width: 38.2%;
}
这个想法有一个必然结果,即如果你很好地设置你的容器结构,你就不必对内容进行太多的水平调整.你基本上让块级元素按照他们喜欢的方式填充容器的宽度,然后你就完成了.
垂直空间更多地是关于内容的结构(即文档流中的元素彼此之间的距离),我认为这些测量对于固定和相对单位(px或em)都可以正常工作.
但是,在这里使用相对单位有助于为您提供垂直节奏,这可能非常令人愉悦.它还允许您更改内容(读取font-size:)并保持垂直间距成比例.
p, ul, ol, dl {
margin: 0 1em; /* gives you proportional spacing above and below,
no matter the font size */
}
字体测量属于他们自己的类别,可能是因为font-size它作为所有其他测量的基础em.我见过不同策略的倡导者,但从我看到的任何测量都可以正常工作,只要你知道你在做什么.
设置font-size在px极其可靠,易于计算.在IE6之后的时代,它也可以很好地扩展,所以px如果你喜欢这个,那就没有理由不使用它.
我在使用中看到的唯一问题px是它没有利用CSS级联.换句话说,一旦我指定了尺寸px,如果我想进行任何大规模的更改,我必须返回并单独更改它们中的每一个.
尽管有任何缺点,我认为这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; }
...
无论如何,我喜欢我能清楚而轻松地看到那里尺寸之间的关系.
根据浏览器的基本字体大小来调整大小看起来像是Web标准的事情,因为那时你允许浏览器的最佳基本字体大小可能不是16px.但在实践中,它的另一种方式是有效的.从我所看到的,浏览器使用16px基本字体大小,因为这是每个人都期望的,并将CSS测量的实际大小设置为在浏览器中看起来不错.
我看到的最大缺点是浏览器支持.如果您为不支持的浏览器编码rem,您将两次添加规则:
p {
font-size: 16px;
font-size: 1rem; /* I kind of hate repeating myself here,
but a good CSS preprocessor might ease that pain. */
}
font-size由于大多数其他字体测量属于垂直或水平测量类别,因此其他字体测量更容易弄清楚.例如:
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媒体查询的方式几乎没有区别.即使用户使用文本缩放来调整页面大小,这也适用.
但是,如果有人在浏览器设置中更改了默认文本大小,则事情的表现会有很大不同.请参阅我对相关问题的回答和我的codepen演示,以获得更长的解释.
简而言之,虽然px在大多数情况下适用于媒体查询,但它绝对更安全em.
当然,上述一般性评论不适用.例如,您可能会发现只要em您想要与字体大小成比例的东西,s就会派上用场,如下所示:
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仍然适用于边界和类似的东西.它也适用于填充,特别是当你配对时box-sizing:
.example {
width: 80%;
box-sizing: border-box; /* Padding is NOT added to total width. Huzzah! */
padding: 10px;
}