css中字体大小适配

# 字体大小的两种单位
font-size: 16px;  // 固定大小，就是16像素
font-size: 1vw;  // 相对大小，下面介绍转化方法

结果

先说怎么做适配：只需要将每个关于长宽的参数单位由px（像素）换位vw即可。那么关键怎么装换？

px

像素，我们通常使用的单位，如果html中的文字使用px作为大小单位的话，就会存在适配问题，即字体大小不能根据屏幕宽度适配。

vw

相对于视口的宽度。视口被均分为100单位的vw，即1vw = width / 100。它是根据视口宽度自动划分的。重要公式：
$$Px=\frac{vw\ast width}{100}px：像素点单位vw：视口单位width：视口宽度$$

概念结束

如上图中的文字选框用px（像素）表示数据如下： 这张图屏幕的width = 1334px;

1. width：1154px;
2. height: 180px;
3. font-size: 36px;

使用vw应该表示如下:

1. width: 86.506vw;
2. height: 13.493vw;
3. font-size: 2.699vw;

公式带入过程

因为我们需要得到vw，所以公式需要变形，最终如下

$$vw=\frac{Px\ast 100}{width}$$

已知

$Px为需要转化的各像素点$
$width屏幕宽度1334px$

带入如下

$width=\frac{1154\ast 100}{1334}=86.506vw$

$height=\frac{180\ast 100}{1334}=13.493vw$

$width=\frac{54\ast 100}{1334}=2.699vw$

只需替换按顺序替换px值即可适应任何屏幕的字体大小问题。

注：可能会存在机器问题，如iphone等适配之后无效或字体大小明显不正确，可以在css顶部尝试添加一下代码

html {
    -webkit-text-size-adjust: 100%;
}