Question

自适应网站中直接用em就能实现字体自适应吗?我用了没有根据浏览器窗口变化，em到底怎怎么用的。

<p style="font-size: 2em">Lorem ipsum dolor sit amet</p>

Answer 1

em的用法
1.em的值并不是固定的；
2. em会继承父级元素的字体大小。
所以我们在写CSS的时候，需要注意两点：
1. body选择器中声明Font-size=62.5%，因为浏览器的默认字体大小是16px；
2. 将你的原来的px数值除以10，然后换上em作为单位；
3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
如果你想字体自适应的话，光靠这是不够的。

追问

如果像我上面那样，我直接用em，但是那个字体大小不会随着我拉动浏览器的快度变大缩小啊，是不是的配合媒体查询器用？？？

追答

像你上面那种用法是不会随着浏览器的宽度变化而变化，因为浏览器的默认字体大小是固定了的。如果你想自适应的话，还是媒体查询写相对应的字体大小。

追问

自适应的网页字体自适应都得用媒体查询器去写啊?有没有简单直接的方法

追答

pc端一般不做字体自适应处理，移动端倒是可以做。一般我们先给页面加上

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />

让移动端的viewport宽度等于设备宽度，不能缩放，缩放倍数为1。这样子再用js根据设备分辨率来设置rem，rem是相对宽度单位，相对于根元素。你在我发的代码里面可以自己看看1个1rem宽高的div在不同分辨率下是多少px。

追问

谢谢你的回答