手机端自适应字体大小和元素宽度自适应

Posted 2020-10-30 maqingyuan

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了手机端自适应字体大小和元素宽度自适应相关的知识，希望对你有一定的参考价值。

第一种，媒体查询：

@media (min-width:0px){
    html{font-size:12px;}
}
@media (min-width: 320px){
    html{font-size:12px;}
}
@media (min-width: 340px){
    html{font-size:13px;}
}
@media (min-width: 360px){
    html{font-size:14px;}
}
@media (min-width: 380px){
    html{font-size:15px;}
}
@media (min-width: 400px){
    html{font-size:15px;}
}
@media (min-width: 420px){
    html{font-size:16px;}
}

第二种：页面插入js（推荐）：

<script type="text/javascript">
    function fontSize(){
        var deviceWidth=document.documentElement.clientWidth>768?768:document.documentElement.clientWidth;
        document.documentElement.style.fontSize=(deviceWidth/25)+"px";
    }
    fontSize();
    window.onresize=fontSize;
</script>

插入一段我自己写的测试例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
    <title>自适应字体大小和元素高度</title>
    <style type="text/css">
        *{margin: 0;padding: 0;text-align: center;}
        h1{font-size: 2rem;padding: 2rem;}
        p{font-size: 1rem;padding: 1px;}
        div{width: 5rem;height: 4rem;background-color: #f00;}
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        function fontSize(){
            var deviceWidth=document.documentElement.clientWidth>768?768:document.documentElement.clientWidth;
            document.documentElement.style.fontSize=(deviceWidth/25)+"px";
        }
        fontSize();
        window.onresize=fontSize;
    </script>
</head>
<body>
    <h1>标题</h1>
    <p>内容</p>
    <div></div>
</body>
</html>

View Code

以上是关于手机端自适应字体大小和元素宽度自适应的主要内容，如果未能解决你的问题，请参考以下文章

处理移动端自适应布局的方法- calc()与vw