大家好，我是半夏?，一个刚刚开始写文的沙雕程序员.如果喜欢我的文章，可以关注➕ 点赞 ? 加我微信：frontendpicker，一起学习交流前端，成为更优秀的工程师～关注公众号：搞前端的半夏,了解更多前端知识! 点我探索新世界！
原文链接 ==>http://sylblog.xin/archives/52
前言
一个网页中最多的东西是啥? 正常人的第一反映肯定是文字，你要是跟我说是图片，那我只能表示：
响应式网页设计中一个很难解决的问题就是文字的大小的问题了，面对千奇百怪的设备，如何解决文字的设配问题，是一个很重要的问题。
最初：@media
下面是两个简单的例子，通过使用媒体查询，改变字体在不同设备下的文字大小。这种做法的缺点在哪里呢？是因为px是固定的，如果你设置的设备的宽度范围比较大，那么就会导致当前的px在另一个设备上看上去很大或者很小。另一个问题是；你不可能所有的文字都用这个大小，还需要针对其他的文字进行单独的处理，很麻烦。代码也很多。
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
html{
font-size:px;
}
}
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
px
}
加强：@media + rem
rem就是html根元素font-size字体大小的倍数。
依赖于rem的特性，比较好的解决了，不同文字不同大小的问题。但是还是如何选择设备宽度区间还是比较复杂的问题。
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
html{
font-size:px;
}
p{
font-size:1rem;
}
:root + vm + vh
对于我来说，我最喜欢的就是使用:root来做，但是你也可以选择html，在:root中根据vm和vh来计算出字体的大小，从而实现设配不同的设备。
:root { font-size: calc(1vw + 1vh + .5vmin); } body { font-size: 1rem/1.6 } 这个公式最终计算出来的大小是啥？先来简单回忆一下：
1vw = 视口宽度的 1%
1vh = 视口高度的 1%
1vmin = 1vw 或 1vh，以较小者为准
1vmax = 1vw 或 1vh，以较大者为准
如果我们将其应用于 iPhone 7 的视口尺寸，即 375×667，计算出的值为:root：
:root { font-size: calc(3.75px + 6.67px + 1.875px); /* 1vw + 1vh + .5min */ } 结语
这几个方法都可以使用，但我还是坚持:root。除了这几种方法，还有其他的方法，例如使用JS在页面，根据视口的宽高，在根元素上设置文字的大小，这样也是很好的一种解决方法，可自行尝试。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/199425.html原文链接：https://javaforall.net
