我听说你应该使用em而不是像素来定义样式表中的大小和距离.所以问题是为什么在css中定义样式时我应该使用em而不是px？有一个很好的例子可以说明这一点吗？
我使用Zurb Foundation 3网格创建了一个站点.每个页面都有一个大的h1.
CSS
body {
font-size: 100%
}
/* Headers */
h1 {
font-size: 6.2em;
font-weight: 500;
}HTML
<div class="row">
<div class="twelve columns text-center">
<h1> LARGE HEADER TAGLINE </h1>
</div>
<!-- End Tagline -->
</div>
<!-- End Row -->当我将浏览器的大小调整为移动大小时,大字体不会调整并导致浏览器包含水平滚动以容纳大文本.
我注意到在Zurb Foundation 3 Typography 示例页面上,标题在压缩和扩展时适应浏览器.
我错过了一些非常明显的东西吗 我该如何实现这一目标？
在这个例子中:
CSS
h1 { font-size: 2em; }
.smaller { font-size: 0.5em; }
HTML
<h1>Hi, I am a <span class="smaller">toad</span></h1>
"toad"这个词是0.5p 16px(浏览器的标准字体大小)还是0.5em 2em(h1的字体大小)？
这很奇怪:我在<em>标签中包含了几行文字.无论我做什么,降低line-height低于17px 的值都没有效果.我可以将最大值line-height 提高到大于17px并适用,但我不能低于17px.
有问题的CSS是:
#others .item em {
font-size: 13px;
line-height: 17px;
}
尝试调整高度和低度的线高,并在每次更改后运行更新的小提琴,您将看到我的意思.
为什么会这样？line-height在CSS中的其他任何地方都没有指定,因此没有任何内容覆盖它.无论如何情况都不是这样,因为我在同一个选择器中调整line-height上下,所以没有意义的是应用更高的值,但是更低的值会被覆盖.
我正在寻找一种可靠的方法来使用javascript以em为单位获取窗口的宽度.我很惊讶地看到jQuery只返回像素测量结果.任何帮助表示赞赏.
我想知道em单位是什么,以及转换为像素(px)时1em是多少.我还在某处读到了一些关于IE的bug,要克服哪些正文字体大小应该设置为某些东西,但不能跟随太多.有人可以详细解释一下吗？
我刚刚完成了对新项目的设计和编码.但我需要它在移动设备上运行良好.我将屏幕大小调整为350~400px宽度,并开始编码并添加一些媒体查询.在redimensioned浏览器中看起来很棒.我已经削减了一些元素和功能,一切都很好......直到我用智能手机测试它
屏幕不大.不到4'(大概3.5).我在代码中添加了一些警报,并意识到其宽度为980px.几乎比调整大小的浏览器测试大3倍.
一切都太小了.其他的东西都很棒:媒体查询正在运行,我在代码中所做的削减也可以,但你几乎看不到我手机中的内容.这当然不是我想要的.
我希望它看起来像一个应用程序,实际上它看起来像是一个在redimensioned浏览器上的应用程序.
如何创建响应式网站来处理这样的问题？
我读了一些关于使用EM(还有一些新的称为REM)单元的东西,但我仍然对此非常困惑.我是否必须将所有内容更改px为em？
而且我知道你可以font-size在html或body标签中设置,所有其他元素都将从它们继承.这是一个approch？你平常都做什么？有诀窍吗？我没有使用bootstrap,也没有使用任何其他前端框架
我想知道为什么Boostrap选择rem而em不是px新版本的Boostrap 4.
一些变量示例:
$font-size-h1: 2.5rem !default;
$font-size-h2: 2rem !default;
$font-size-h3: 1.75rem !default;
$mark-padding: .2em !default;
使用em和rem是一个很好的做法:
margin: 0;
padding: 0;
bottom: 0px;
width: 100%;
我只是好奇我在网上找不到这个,所以我要问的原因.
我正在寻找一种简单的方法来为我的插件添加一行代码,将几个像素值转换为em值,因为我的项目布局需要在ems中.有没有一种简单的方法可以做到这一点,因为我不想在网站上添加第三方插件.
不会在这里发布代码,因为它与它自己的插件无关.
谢谢.
示例:13px - > ?? em
当1em应用于元素时,它采用浏览器的默认值(通常为16px)或其父级的font-size值,对吗？但是我注意到如果我margin-top: 1em在h1元素中使用类似的东西(不使用重置样式表,因此,h1设置为font-size: 32px),则1em等于32px,即使其父元素设置为font-size: 16px.
但是,使用类似font-size的东西:100%; 解决了这个差异.
我错过了什么？