在为问题写了一个很好的答案之后在CSS中处理像素是不是很糟糕？我得出的结论是,如果你理解了这些限制,我通常没有任何问题,我开始怀疑有多少人将默认字体大小设置为16px以外的其他东西.
我想有些用户会因为视力不佳或高像素密度监视器(如15英寸笔记本电脑上的1920*1080屏幕)而改变它(或者可能只是因为他们喜欢较大的文本).也可能有一些设备(手持设备？)的默认字体大小设置为其他东西,但这纯粹是我猜想的猜测.
我的问题是:有没有人知道有关用户将默认浏览器字体大小设置为16px以外的其他百分比的统计数据？
我最后几天处理响应式网页设计和网页设计的单位.我的问题是关于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媒体查询中使用单位时，我注意到单位基于浏览器的默认字体大小，而不是html根。
它工作时，奇我会集到20em的元素宽度时断点min-width: 20em。在这种情况下，两个单位并不相等，因为元素的20em基于html font-size浏览器的默认字体大小而媒体查询基于默认的浏览器字体大小。
有没有一种方法可以使用emunit实现相同的大小，而无需仅为断点 ( @bp-size: 16.250em)定义额外的、单独的变量？
html {
font-size: 0.813em; // 13px (assume default browser font-size: 16px)
}
.box {
width: 1em; // 13px x 13px
height: 1em;
background-color: #000;
// Problem
@size: 20em;
@media screen and (min-width: @size) { // 320px (20 x 16px) why not 260px?
width: @size; // 260px (20 x 13px)
background-color: #f00;
}
}<div class="box"></div>