在使用rem单位时,在Google Chrome(或Firefox)中的结果并不是预期的。我设置了一个以根字号大小为10px的页面,以便更轻松地将基于像素的设计转换为html / css。
这是我的css。我期望的是一个宽度为500px的框,并且如果屏幕宽度超过500px,则背景应变为红色。
html {
font-size: 10px;
}
@media screen and (min-width: 50rem){
body{
background-color: red;
}
}
.test{
width: 50rem;
background: black;
height:100px;
}
然而,尽管两个值均定义为50rem,结果是一个宽度为500像素的框,在800像素处页面变红。
https://jsfiddle.net/tstruyf/puqpwpfj/4/
我做错了什么或为什么会这样?
em
和rem
来自于排版领域,我通常只在处理字体时使用它们,以及当我希望其他元素与文本保持比例时使用。 - sjahan