Question

大神们，请问移动端怎么设置字体随着屏幕大小而变化~

@media screen and (min-width: 320px) and (max-width: 720px){
body{
font-size:1.8rem
}
}
html,body{font-size:62.5%; }

这样是哪里不对呢

Answer 1

既然你会用@media screen那么就更简单了，下面的是我以前做的时候一个例子，你可以试一下；

先设置一个区域让，设置最大宽度，与最小宽度：如：.header{color:#1d1d1d; width:100%; text-align:center;min-width:320px;margin:0 auto;max-width:640px;z-index: 999; overflow:hidden}
你可以测试一下，下面的max-width:360px判断浏览器的宽度：当浏览器小于360px，执行font-size:15.5px
其余的应该就明白了吧，当浏览器大于360px、400px这些即可执行后面body里属性

@media screen and (max-width:360px){body,input,select{font-size:15.5px}}
@media screen and (min-width:360px){body,input,select{font-size:15.75px}}
@media screen and (min-width:400px){body,input,select{font-size:17.5px}}
@media screen and (min-width:480px){body,input,select{font-size:21px}}
@media screen and (min-width:560px){body,input,select{font-size:24.5px}}
@media screen and (min-width:600px){body,input,select{font-size:26.25px}}
@media screen and (min-width:640px){body,input,select{font-size:28px}}

追问

太感谢了~
这样的话，下面我写的时候，单位是要用px对吧~

之前我都是用rem写的，能不能把上面这一段改成适用rem的呢~

追答

用什么控制字体大小看你个人的喜好，感谢的话就不用说了，采纳一下吧

Answer 2

rem也是相对于固定值的 ，%也是一个相对值 。。。

追问

这个相对值是怎么计算的呢~具体怎么写呢~

追答

假如你设置整个页面的字体大小为16px，那么0.5rem就是16px的一半 ！