zoukankan html css js c++ java

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

第一种，媒体查询：

@media (min-0px){
    html{font-size:12px;}
}
@media (min- 320px){
    html{font-size:12px;}
}
@media (min- 340px){
    html{font-size:13px;}
}
@media (min- 360px){
    html{font-size:14px;}
}
@media (min- 380px){
    html{font-size:15px;}
}
@media (min- 400px){
    html{font-size:15px;}
}
@media (min- 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

用心做它,真心体会.

查看全文

相关阅读:
微信公众号 sign类
 serlvet HttpServletRequest
servlet setCharacterEncoding setHeader 设置字符区别
 java 读取word
java 使用Java生成word文档
 java io 读取写文件
 异步Promise及Async/Await可能最完整入门攻略
 React和Vue组件间数据传递demo
Vue基础指令集锦
 vue 关于数组和对象的更新

原文地址：https://www.cnblogs.com/maqingyuan/p/8778461.html