移动端通过js动态设置字体大小

最新推荐文章于 2023-10-07 09:39:40 发布

zz0567

最新推荐文章于 2023-10-07 09:39:40 发布

阅读量429

点赞数

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/zz0567/article/details/121619822

版权

本文介绍了如何在移动端应用中使用JavaScript动态地设置字体大小，以适应不同设备的屏幕尺寸和用户阅读习惯。通过JavaScript获取屏幕宽度，并根据宽度调整字体大小，确保良好的阅读体验。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>rem相对根节点</title>

    <style>
        /* rem是相对于根节点html的font-size值
            
         */
        html {
            font-size: 100px;
        }

        div {
            /* 16像素 */
            font-size: .16rem;
        }

        h1 {
            /* 20像素 */
            font-size: .2rem;
        }
    </style>
</head>

<body>
    <div>
        哈哈，我是div元素
        <h1>我是div的儿子h1</h1>
    </div>
</body>


     通过下面的js设置
     下次试用只要下面的


<script>
    function setRem() {
        var ui_w = 375;
        // 获取屏幕的宽度
        var clientWidth =

最低0.47元/天解锁文章

zz0567

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动端通过js动态设置字体大小

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>r.
复制链接

扫一扫