相关疑难解决方法(0)
推荐指数
解决办法
查看次数
Chrome不尊重body标签上的rem字体大小？
我已经开始rem在最近的项目中使用's来调整字体大小,然后使用px作为旧版IE的后备版.
我也设置了font-size62.5%,html所以我可以在样式表中更轻松地设置字体大小,然后我1.4rem在主体上设置字体大小,所以没有样式的元素有font-size至少14像素的基数,请参阅代码如下:
html { font-size: 62.5%; } /* font-size: 62.5% now means that 1.0 rem = 10px */
body { background: #fff; font-family: arial; font-size: 1.4rem; line-height: 1.6rem; }
问题是,Chrome似乎以一种奇怪的方式处理这个问题...... Chrome似乎在初始页面加载时正确设置了字体大小,但在随后的刷新中,字体大小比它们应该更大.
查看FIDDLE(HTML复制如下以供将来参考)
<!DOCTYPE html>
<html lang="en-GB">
<head>
<title>Page Title</title>
</head>
<body>
<p>This is a test, this font should have font-size of 14px.</p>
<p>This is a test, this font should have font-size of 14px.</p>
<p>This is a test, this font …推荐指数
解决办法
查看次数
基于Rem的布局,放大铬是不一致的,PX与REM
我一直在讨论这个问题,谷歌搜索并没有太多帮助甚至记录这个问题,但它对我目前转换为适合移动设备的设计有很大影响.
无论我走到哪里,每个人都在鼓吹使用rem基于布局的新黄金标准,从表面上看,这种方法的优点似乎是理想的(基于参考像素的缩放和字体大小缩放的完全可访问性支持,以支持许多DPI和许多屏幕尺寸/设置).
然而,我遇到了一个相当大的障碍,我发现Chrome(可能还有所有的webkit浏览器,但我没有测试的mac atm)似乎与其他浏览器不一样.
初始设置如下:
html { font-size: 62.5%; }
body { font-size: 1.6rem; }
我们应该能够使用rems中1/10像素大小设置所有测量值:
.my-element { height: 15rem; } /* 150px */
我创建了一个简单的例子来说明我的问题:https://jsfiddle.net/gLkpz88q/2/embedded/result/
当您使用Chrome并按比例缩小时,请注意布局如何停止缩放但内容仍在继续.
将它与Firefox,IE11,Edge进行比较,您根本看不到这种行为,它们都是统一且连续的.
这里(左上角:Chrome,右上:IE11,左下:边缘,右下:FireFox)并排:
正如您所看到的,如果rem单位与其他所有内容的比例不同,则会对布局产生一些可怕的影响.
我不确定如何继续这种情况,因为似乎WebKit/Chrome决定以完全不同的方式处理扩展,并且这要求对未来的所有扩展方案提出质疑.
有很多文章主张使用像素,因为CSS Reference Pixel可以很好地处理移动扩展:
然而,这些倾向于忽略字体缩放问题,并将其视为不太可能发生的情况.
我快速浏览了大型移动友好/友好网站,我可以想到大型和成功的公司,似乎大多数人只是使用像素来满足他们所有的布局需求.(Google,Facebook,Wordpress,Twitter,Bootstrap 3,[在某种程度上Bootstrap 4],MDN和WebPlatform)
Chrome是新标准的Busting IE吗？或者我在做一些可怕的错误？我很想在这一点上使用像素来保持一致性.
推荐指数
解决办法
查看次数
为什么使用rem代替px呢？
好的,首先,是的,我读了很多文章(我应该在我的CSS中使用px或rem值单位吗？)和论坛.
我知道1px不是一个物理像素,而是一个CSS像素,rem基本上是相同的em,但它是相对于根元素(因此r在rem - root中),而不是父元素.em本身等于文档中设置的大小,并且由于与像素相比具有可扩展性而无法扩展,因此它很受欢迎.
在我阅读的所有文章中,每个人都喜欢rem,它应该font-size在现代浏览器中使用,但也可以px用作IE8及更低版本的后备.我看到人们使用rem的主要原因是尺寸更好,更"移动友好".现在我突然读到文章说所有现代浏览器都支持viewport,所以scalibilty不再是一个大问题.
然后我读取以正确地将rem转换为px,反之亦然,我们可以使用html { font-size: 62.5%; }然后将1rem转换为10px.
因此,在所有这些混乱之后,如果scalibilty没有问题,因为视口和1rem通过html 62.5%转换为10px,加上我将使用像素作为回退,那么为什么首先使用rem而不仅仅是坚持像素？我没有看到任何使用的优点rem.
还是我错过了一些主要优势rem？
推荐指数
解决办法
查看次数
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/
这篇文章也有一个意见专家: 我应该在CSS中使用px或rem值单位吗？
反对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,...)
推荐指数
解决办法
查看次数
何时选择 REM 而不是 PX？
我什么时候应该使用 rem 而不是 px？我看到很多文章说我应该使用 REM 来尊重用户的偏好，但是示例总是说字体大小，而不是整个样式 - 边距、填充、边框、宽度、高度等。 拿了这篇文章例如：我应该在 CSS 中使用 px 还是 rem 值单位？
所有的答案都是关于字体大小的，好吧，我明白了，rem 更适合字体大小，但是其他样式呢？我看到引导程序使用 px 到容器类，到 col-* 类，是否有原因？
我正在创建这个覆盖 Bootstrap 默认样式的站点，我应该用 pxs 覆盖它使用 px 的地方还是应该使用 rem？
谢谢你。
推荐指数
解决办法
查看次数
Safari CSS 规则 vh-units？
有人知道Safari vh规则是否有修复吗？
#what{
min-height:70vh;
}
一切正常，在所有浏览器中，但仅在 Safari 中无法识别？safari 是否有修复，我们可以在 css 中使用 VH 规则？
推荐指数
解决办法
查看次数
雷姆单位，如何根据屏幕尺寸缩放
有人说，我正在设计一个使用rem单元的网站，rem单元会根据屏幕尺寸更改尺寸。
我尝试将浏览器窗口拖动到移动设备尺寸，然后从chrome进行查看（计算出的样式）
我所看到的是，它仍然与桌面大小相同。相同的21px 它没有改变。
您能解释一下，REM单位做什么？
谢谢。
推荐指数
解决办法
查看次数
如何制作不太大或太小的响应式文本
我是网页设计的新手.我对CSS/HTML有一个很好的理解,但我对如何设置字体样式以适应移动设备存在冲突.
目前我使用px在我的网页上使我的字体变大或变小.但是,这样做会使我的字体在高px /英寸设备上看起来非常小.
如何让我的字体在这些高分辨率屏幕上显得清晰,而不会让它们看起来超小？
例如:
.thisClass{
font-size:12px;
}
是我习惯使用的.在我的笔记本电脑上它看起来很好,但我不知道它在平板电脑上看起来如何,因为我没有一个D:
推荐指数
解决办法
查看次数
为什么字体大小普遍应用时不可靠？
使用以下 CSS：
* {
margin: 0;
padding: 0;
font-family:"Segoe UI";
font-variant: small-caps;
}
.red {
color: hsl(0, 100%, 50%);
font-size: 3em;
}
.orange {
color: hsl(30, 100%, 50%);
font-size: 3em;
}
.yellow {
color: hsl(60, 100%, 50%);
font-size: 3em;
}
.green {
color: hsl(120, 100%, 50%);
font-size: 3em;
}
.blue {
color: hsl(210, 100%, 50%);
font-size: 3em;
}
.indigo {
color: hsl(230, 100%, 50%);
font-size: 3em;
}
.violet {
color: hsl(274, 100%, 50%);
font-size: 3em;
}
... * 选择器中的属性工作正常 - …
推荐指数
解决办法
查看次数
以 10 为底的 REM 是否等于确切的像素大小？
我正在努力弄清楚使用 REM 和像素回退有什么好处。我正在开发的应用程序通过在 html 上设置字体大小将 REM 声明为大约 10px；
html {
font-size: 62.5%; /* Sets up the Base 10 stuff */
}
在我的 CSS 文件中，我会像这样分配字体大小。
.myClass {
font-size: 18px;
font-size: 1.8rem;
}
显然，如果不支持 CSS rem，则像素定义可以作为后备。问题是，如果 REM 与像素大小相同，那么使用 REM 有何意义，为什么不直接使用像素呢？
推荐指数
解决办法
查看次数
在图像尺寸上使用 rem、em 和 px
我正在寻找有关这些单位在图像尺寸上的使用的一些解释，但找不到任何解释。我在一些地方读到忘记像素并仅使用 rem/em，但我不知道它是否也适用于图像尺寸（宽度/高度）。
例如，在下面的这种情况下我应该使用哪一个？
<img src="https://i.imgur.com/NReN4xE.png" style="width: 5rem;" />5rem<br>
<img src="https://i.imgur.com/NReN4xE.png" style="width: 5em;" />5em<br>
<img src="https://i.imgur.com/NReN4xE.png" style="width: 100px;" />100px<br>推荐指数
解决办法
查看次数