stc*_*ete 12 html5 ssas css3 media-queries
任何人都可以解释为什么我的媒体查询在将它们从px转换为ems时会中断
在我的文档正文中,我已经包含以下规则font-size:62.5%,因此我假设我可以将我的媒体查询转换为FROM 650px到65em？将我的媒体查询更改为ems会破坏布局
作为替代方案,我可以使用像素回退将媒体查询转换为REMS吗？那说,我不知道该怎么做
@media screen and (min-width: 650px) {
body
{
font-size: 62%;
background-color: #364759;
background-repeat: repeat-x;
background: url("bg.gif");
}
#wrapper,
footer
{
width: 80%;
max-width: 1050px;
margin: 0 auto;
}
} // end media query
非常感谢,P
Flo*_*oal 18
媒体查询中的相对单位基于初始值,这意味着单位永远不会基于声明的结果.例如,在HTML中,em单位是相对于font-size的初始值,由用户代理或用户的首选项定义,而不是页面上的任何样式.
同样,第2节说:
除非另一个功能明确指定它影响媒体查询的分辨率,否则无需应用样式表来评估表达式.
因此,您的font-size: 62.5%规则对媒体查询没有影响,1em但仍然16px没有10px.
这样做的原因是否则会导致循环,这是CSS无法处理的.如果我们没有这个规则,试着想一下这个例子会做什么:
body { font-size: 10000px; }
@media (min-width: 1em) {
body { font-size: 1px; }
}
1em会是巨大的,所以媒体查询会匹配,所以1em会很小,所以媒体查询不匹配,所以1em会很大,所以...
这篇文章很有用,可以帮助解释px/em/rem之间的差异
https://www.futurehosting.com/blog/web-design-basics-rem-vs-em-vs-px-sizing-elements-in-css/
这也许有用:https: //css-tricks.com/rems-ems/
编辑
正如@Jesse Kernaghan评论的那样,上面的链接很容易被打破,我将概述.PX与EM对REM的差异.
PX
像素是绝对测量值,这意味着它们的大小相同,而不管其他任何大小.在实践中,它们在各处都不是相同的长度,因为特定设备对它们的处理方式不同,但是在每个设备上,像素总是相同的. 16px在您的笔记本电脑显示器16px上与iPad 上的显示器不同.像素是绝对的但不一致.
EM
其中px是长度的绝对度量em的是相对于父元素的字体大小.请看以下示例:
div{ font-size: 22px; }
p{ width: 200em; margin: 3em; font-size: 0.8em;}
<div>
<p>Some text</p>
</div>
现在,如果你想的一半大小的p元素你只需要改变周围的字体大小 <div>来11px.
这种度量单位非常有用,因为它与响应式布局有关.
但是,有问题em.因为所有内容都相对于父类进行了大小调整,所以em的含义会随着元素的嵌套而发生变化.如果你把上面的例子和扩大它,巢<blockquote>内<p>用font-size的0.5em,结果可能不会是所希望的.其结果将是对font-size的<p>将等于11px不过font-size的<blockquote>将是一半的了,因为em相对于直接祖先(<p>),而不是<div>.
REM
REMS(根EMS),是像em的,但是它们总是相对于font-size所述的<html>元件.嵌套元素的深度并不重要.
结论
因此,简要解释一下Chris Coyier在他的帖子https://css-tricks.com/rems-ems/中有一个基本概念.它基本上概述了设置基本html字体大小然后使用px(记住这是绝对测量)进行媒体查询调整.在这些媒体查询中调整大小你所做的就是缩小字体大小.然后使用rem和需要缩放的元素设置主元素,使用主元素em.Chris Coyier代码示例如下:
/* Document level adjustments */
html {
font-size: 17px;
}
@media (max-width: 900px) {
html { font-size: 15px; }
}
@media (max-width: 400px) {
html { font-size: 13px; }
}
/* Modules will scale with document */
.header {
font-size: 1.5rem;
}
.footer {
font-size: 0.75rem;
}
.sidebar {
font-size: 0.85rem;
}
/* Type will scale with modules */
h1 {
font-size: 3em;
}
h2 {
font-size: 2.5em;
}
h3 {
font-size: 2em;
}
| 归档时间： |
|
| 查看次数： |
8582 次 |
| 最近记录： |