我有一个场景,一个媒体查询将body和html元素的字体大小设置为85%。一项新的工作要求字体大小不改变时,网站进入移动断点,但设置字体大小为100%,当发生这种情况下,不影响字体大小,尽管采取了优先权。
我的问题是,当我到达触发较小文本的断点时,如何保持将所有字体大小设置为85%的规则,但在我的网站中的某个特定位置保持字体大小。
导致较小文本的规则
@media only screen and (min-width: 320px) {
html, body {font-size: 85%;}
}
应该覆盖它的规则,忽略它总是开着的事实。
@media only screen and
我想使用rem作为我的字体大小,这样用户就可以通过他的浏览器设置对段落有一个可伸缩的字体大小。我选择了fontsize=10px作为根,为了方便地转换photoshop字体大小。使用像素作为根字体大小是否会丢弃用户首选项?是否必须以像素为单位设置根元素的百分比?
html {
font-size: font-size: 10px;;
}
p {
font-size: 1.2rem; /* will be 12px
}
我目前的项目完全基于ems。
html
<div class="tiny">
This is some tiny text which is tiny.
</div>
<div class="small">
This is some small text which is small.
<div class="tiny">
And this is some tiny text inside small text which should be as tiny
我试图理解为什么设置不同的基本字体大小不会影响媒体查询的EM值。
它们的作用是默认的基本字体大小为16 as,而其他内容的反应正常。
你自己试试看:
PX中的媒体查询: OK
EM中的媒体查询: 不确定
REM中的媒体查询: NOT
html {
font-size: 62.5%; /*setting the base font size to 10px*/
}
body {
background: white;
}
span {
font-size:6em; /* 60px, as it should */
}
@media only screen and (min
在网站源代码中,我有时会看到开发人员使用rem单元。它类似于em吗?我试着看看它到底做了什么,但它是相对于什么的呢?
HTML
<div>Hello <p>World</p></div>
CSS
div {
font-size: 1.4rem;
}
div p {
font-size: 1.4rem;
}