css中字体大小适配

最新推荐文章于 2024-02-01 13:45:13 发布

MrNoboday

最新推荐文章于 2024-02-01 13:45:13 发布

阅读量4.9k

点赞数

分类专栏：前端文章标签： css适配字体大小

本文链接：https://blog.csdn.net/MrNoboday/article/details/82858461

版权

8 篇文章

订阅专栏

本文介绍了如何使用vw单位解决CSS中的字体大小适配问题。通过将px转换为vw，实现字体大小随视口宽度变化。核心公式为：Px=100vw*widthpx，其中vw表示视口宽度的百分比。示例中，1334px宽度的屏幕下，36px字体对应2.699vw。适配时只需将px值替换为vw值即可。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

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

在这里插入图片描述

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

使用vw应该表示如下:

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

$\frac{Px * 100}{width}$

$P x 为需要转化的各像素点$
$w i d t h 屏幕宽度 1334 p x$

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

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

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

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

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