css中字体大小适配

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

结果

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

px

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

vw

相对于视口的宽度。视口被均分为100单位的vw，即1vw = width / 100。它是根据视口宽度自动划分的。重要公式：
$Px = \frac{vw * width}{100}\quad px：像素点单位\quad vw：视口单位\quad width：视口宽度$Px=100vw∗width​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 * 100}{width}$vw=widthPx∗100​

已知

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

带入如下

$width=\frac{1154*100}{1334}=86.506vw$width=13341154∗100​=86.506vw

$height=\frac{180*100}{1334}=13.493vw$height=1334180∗100​=13.493vw

$width=\frac{54*100}{1334}=2.699vw$width=133454∗100​=2.699vw

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

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

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