移动端开发笔记----字体单位的选择

在移动端进行前端开发如何选择字体是需要注意的。习惯了在pc端使用像素（px）来作为文字大小的单位，你可能会想到，在移动端开发中依然使用pc端开发的习惯可能对最终效果造成难以预料的结果。

不要轻易使用px作为文字大小的单位。

你可能认为由浏览器自动选择字体大小就可以了，但是绝大多数浏览器都默认以16px来显示字体,不信你可以自己试试看，当然各种浏览器的默认设置是不同的，通常我们通过reset来初始化一些基础样式，不过字体我试过ie8，ff,chrome,safari 字体这点还是一样，不过这里不是我们讨论的重点，可能有别的浏览器不一样，我们暂时就不去关心了。

是不是感觉有些偏大了呢？

通常的做法是使用em或者百分比作为单位。

HTML文档中em相当于当前默认字体大小。因此不带任何样式的1em对应的是16px。而我们通常使用的字体一般是12px，对，通常，也有可能10px或者14px。

那我们如果要使用12px的字体大小该怎么办？

或者你知道了如果默认值是16px=1em，那我就设置成0.8em呗。  嗯，有道理。

要不，我们就想使用reset的方式一样，把初始化css设置成我们想要的初始值吧。

你可以这样：

body{

font-size:75%;

}

使用百分比缩放了初始值，16px * 75%=12px

那么以后使用1em就表示12px了。

不过值得注意的事，以上的推定其实是利用em的继承性，body内部的子元素继承了body的font-size设置。

如果是这样：

body{
    font-size:75%;
}

 

<section style="font-size:2em;">
<p style="font-size:1em">要显示的文字</p>
</section>

你觉得p标签中的字体大小是多少呢？

因为初始值字体大小为12px，p标签的的父亲元素section的font-size设置为2em，他继承了body的字体大小基数，而内部的p要继承的是section的字体作为基数，因此最后p标签中文字大小1em=24px;

 

转载于:https://www.cnblogs.com/all-blue/p/3287128.html