html页面对字体的自适应

直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
    <title>Document</title>

    <style >
        .father {
            font-size: calc( 12px + (16 - 12) * ( (100vw - 400px) / ( 1500 - 400) ));
        }
        .son {
             font-size: 1em;
        }
        .son1 {
             font-size: 1.5em;
        }
        .son2 {
             font-size: 2em;
        }
        .son3 {
             font-size: 2.5em;
        }
       </style>
</head>
<body >
    <div class="father">
            <p style = "color:green" class="test"> my name is qq ,from china </p> 
            <p style = "color:green" class="son1"> my name is qq ,from china </p> 
            <p style = "color:green" class="son2"> my name is qq ,from china </p> 
            <p style = "color:green" class="son3"> my name is qq ,from china </p> 
    </div>

</body>

</html>

利用css提供的计算属性来计算每个窗口的大小下应该显示的字体大小。用来解决各个像素下字体适配的。比起media查询来更加方便。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容