利用媒介查询实现自动缩放字体大小

最新推荐文章于 2022-08-13 23:30:27 发布

而安-

最新推荐文章于 2022-08-13 23:30:27 发布

阅读量2.6k

点赞数 1

CC 4.0 BY-SA版权

文章标签：字体移动端

本文链接：https://blog.youkuaiyun.com/u014189045/article/details/50205537

本文介绍如何使用媒介查询技术实现网页中文字大小的自动调整，根据不同设备屏幕尺寸改变字体大小，提升用户体验。

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

html:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<title>利用媒介查询实现文字自动缩放大小</title>
</head>
<body>
    <ul>
        <li>利用媒介查询实现文字自动缩放大小</li>
        <li>利用媒介查询实现文字自动缩放大小</li>
        <li>利用媒介查询实现文字自动缩放大小</li>
        <li>利用媒介查询实现文字自动缩放大小</li>
    </ul>
</body>
</html>

css

<span style="font-size:12px;"><style type="text/css">
	body{ max-width:750px; min-width:320px; margin:0 auto}
	li{ list-style:none; font-size:30px; font-family:"微软雅黑"}
</style></span>

默认字体为30px

添加媒介查询：

当手机屏幕为414px时字体大小为16px

@media screen and (min-width:414px) {
 html,body,button,input,select,textarea {
  font-size:16px
 }
<div> </div><div>当手机屏幕为384px时 字体大小为14px</div>

@media screen and (min-width:384px) {
 html,body,button,input,select,textarea {
  font-size:14px
 }
}

当手机屏幕为320px时字体大小为12px

@media screen and (min-width:320px) {
 html,body,button,input,select,textarea {
  font-size:12px
 }
}