问题标签 [em]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
css - CSS“em”问题:避免缩放到特定元素的字体大小
我的网站几乎完全是用“em”(而不是 px)设计的。对于现代浏览器来说,它应该要好得多。
大多数文本是字体大小:1em。默认情况下 1em = 16px,我没有指定它。
但我有一些字体大小为 1.2em 和其他为 0.8em 的内容(例如 H1 或小按钮)。
“em”的问题在于它会根据字体大小重新缩放元素的所有大小(边距、填充、高度......)。
我的 CSS 中有特定的代码:
普通按钮的边距为 1x1x16 = 16px。但小按钮的边距为 1x0.8x16 = 12.8px。
显然这是一个特定的“em”属性(在“px”中不是这种情况),它根据元素的字体大小缩放所有内容。
这个例子很简单;但在我的网站上,我很难保持一致。
如何取消激活此属性,以便在上面的示例中 2 个按钮具有相同的边距?(无需重新计算尺寸;这就是我现在正在做的事情!)
css - Resize svg file in steps to avoid blurriness
so I though about using svg files for icons. for e.g. like this
I would like it to scale with the font-size of the user, which is why I figured I use em. But if the users default font-size is something like 23px or so, the svg is all blurry because the icons can not fit perfectly into the pixels. Is there a way to get around that? Can I detect the users font-size with a mediaquery and set the icon font-size to a certain value to make sure the icons look okay?
Comparison 22px (bad/blurry) to 24px (correct)
css - EM 单元如何有助于响应式设计
我试图了解如何使用em
单元进行响应式设计,我已经搜索了很多关于它的内容。我从这些页面中了解到的em
是一个相对单位,如果您定义正文字体大小,则相同将等于 1em。但我仍然对以下内容感到困惑:
如何
em
用于我的响应式设计,我的意思是当我们使用%
单元页面时会相应地调整它的宽度,我们怎么能em
用于同样的事情。哪个好
%
或em
。
实际上我不确定如何使用 em 使页面完全响应。如果您能帮助我提供一些链接或小型演示,那就太好了。
jquery - 让 jQuery 用 em 而不是 px 来测量
我不确定我能说得有多好,但让我试一试。
我有一个严重基于 jQuery 的网站;这意味着它的大部分内容都是由 jQuery 创建、测量和设置的。
所有这些测量值都是 px。我需要将它们转换为 em,或者最好创建一个函数来为我转换它们。如果所有字体大小都是 16 像素(或 100%),这将很容易;然而,情况并非如此。我需要它来检测容器的字体大小并从那里开始。
如果措辞不当,我深表歉意。如果你能理解这一点并帮助我,那就太好了。如果你觉得不可能,请不要回复,一切皆有可能,只看你愿意付出多少努力。
css - CSS 使用 em 单位。div 父元素中图像大小的一半
我有一个图像,用作 html 标记中的源代码img
,位于div
. 使用em
大小单位,我想将我的图像调整为他父 div 框的一半。因此,我将 img 的 CSS 属性width和height都设置为0.5em
. 但是正如你在下面的代码中看到的,结果并不像预期的那样!
小提琴: http: //jsfiddle.net/framj00/pz27X/1/
你能帮我解决这个问题吗?
非常感谢!:)
css - 在 ems 中创建两个大小相同但字体大小不同的 div
我一直在阅读 ems,我明白为什么我们应该使用它们。
所以现在我正在尝试将它应用到我的布局中。在我的布局中,我有两个div
彼此相邻。左边的有一个font-size: 1em;
,第二个有一个font-size: 0.8em
。
两者都div
应该具有相同的大小和边距。(在这个例子中,它们是 6em 宽度,1em 边距)
现在我遇到的问题:
第一个div
,with font-size: 1em
,是(浏览器默认为16px)16 x 1 x 6 = 96px
第二个div
,with font-size: .8em
,是16 x .8 x 6 = 76.8px
看到这个JSFiddle,作为演示。
为了使两个 div 大小相等,但字体大小不同,需要此代码:
这意味着我必须用 for 的样式覆盖我声明的一般div
样式.small2
。
这是要走的路,还是我正在监督更好的解决方案?
css - 在chrome中使用REM,无法重现错误
正如标题所说,我正在尝试在页面的所有元素上使用带有 px 的 REMS 回退旧浏览器,而不仅仅是字体。测试网站是:test.glow-sticks.org
如果以下任何术语不正确,我深表歉意,我远非专家!
在超过 1024 的分辨率上,使用 (html in css) 的字体大小设置为 62.5%,简单来说就是 1rem = 10px,在这个分辨率上,我将默认字体设置为 1.4rem / 14px
在超过 1680 的分辨率上,html css 设置为 71.4%,通过设置此百分比,字体从 14px 变为 16px,当然所有元素都以相同的百分比增加,这非常酷,并且似乎使所有内容保持完美同步。
在我的计算机上,这似乎可以完美运行,就像在我一直使用的许多其他测试平台上一样。然而,我的网络开发人员似乎在她的机器上遇到了问题,但仅限于 chrome。(firefox和IE不受影响)
在她的机器上,当她将分辨率降至 1024(从她的原生 1920 分辨率)时,网站正在加载水平滚动条,而在我的机器上,它适合 1024。使用 chrome 检查元素工具时会变得更有趣。我一直在检查一个 DIV,特别是 Div id=wholepage,在 1024 屏幕上查看时它应该是 960px 宽,在 1680+ 上查看时它应该是 1097px 宽。
然而,在她的 Chrome 上,div=wholepage 在 1024 分辨率上显示 1152px,在她的原生 1920 分辨率上也显示 1152px。
我注意到在我的 Chrome 版本上,我必须将字体大小设置为 75% 才能重现相同的内容。似乎无论我将字体大小设置为整页 div 还是希望为 1152px。我什至尝试了 10%,这在我的 chrome 上非常正确,使一切变得很小,但在她的机器上没有任何变化。唯一改变的是 font-size 确实说 10%,但它好像没有被尊重,并且被至少 75% 覆盖。
请问谁能重现这个?
她能想出的唯一解决办法是使用更高的百分比,比如 90% 和 103%,这提供了与 62.5 和 71.4 相同的增加,但是保持它看起来更好,所以 1 rem = 10px,这就是我想保持这个的原因62.5为基础。
html - CSS EM 测量搞砸了?
我的 em 单位有问题,我已将导航列表宽度设置为 6.250em,相当于 100px 并且工作正常。当我将每个 li 的宽度更改为 6.250em 时,它不会延伸到与导航列表相同的宽度。为什么会发生这种情况,我该如何解决?
CSS 代码:
HTML 代码:
JSFiddle 这里:http: //jsfiddle.net/2ZT9w/1/
spacing - 字母间距转换 px 到 em
1000 个字母间距等于 1 em。所以 -100 字母间距等于 -0.1em,使用数学 -100/1000px。
我不明白为什么我的 Dreamweaver 导出与我的 Illustrator 设计不匹配。间距还是太大了。
我正在使用 72px 字体..
html - 如何将 em 设置为 10px 以获得完整的网站
我正在为响应式网站创建模板。我了解到 em 非常适合用于响应式设计。但问题是我将正文字体大小设置为 62.5%,但是当我使用 p、span 和其他元素(如 2em)时,字体大小比 2 em 与 20px 不同。根据我的默认字体大小,正文中的任何位置都应该是 2em=20px,因为 62.5% 会覆盖默认的 1em=16px 到 10px。请建议我应该改变什么,以便每当我将任何元素的字体大小设置为 2em 时,它都会是 20 像素。