自己常用的移动端基础模板 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>移动端基础模板快速创建</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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">

    <!-- 禁止缓存 开发时候使用 -->
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />

    <link rel="stylesheet" href="">
    <style>
	/* css reset */
	body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;}
	html{ font-size: 40px; } /* 设置根元素 计算rem 1rem = 40px */
	body{background:#fff;color:#333; font-family: PingFangSC-Semibold;}
	ul,ol{list-style-type:none;}
	select,input,select{vertical-align:middle; outline: none;}
	img{vertical-align:middle; border:0;}
	table { border-collapse:collapse; border-spacing:0; }

	a{text-decoration:none;}
	a:link{color:#009;}
	a:visited{color:#800080;}
	a:hover,a:active,a:focus{color:#c00;text-decoration:none;}
    </style>
</head>
<body>
<!-- 固定的头部 fixed -->
<div class="header"></div>

<!--
body： overflow:hidden,
mainbox： overflow-y:auto; position:fixed; top:header.height(); bottom:footer.height(); left: 0; right: 0; width: 100%;
解决移动端滚动的时候固定的头尾会跟随浏览器移动的问题~
-->
<div class="mainbox"></div>

<!-- 固定的底部 fixed -->
<div class="footer"></div>

<script src="https://cdn.bootcss.com/jquery/1.12.1/jquery.min.js"></script>
<script>
    $(function(){
        setRem();
    });

    /**
     * @Description: rem自适应
     */
    function setRem(){
        let b = document.documentElement,
            a = function() {
                let a = b.getBoundingClientRect().width;
                b.style.fontSize = 0.0625 * (640 <= a ? 640 : a) + "px"; // 640*0.0625 = HTML的40px
            },
            c = null;
        window.addEventListener("resize",function() {
            clearTimeout(c);
            c = setTimeout(a, 100);
        });
        a();
    }
</script>
</body>
</html>

猜你喜欢

发表评论

最新发布

分类目录

友情链接

热心市民李哈哈

功能