H5模板 - 简书

H5模板

--->html内容：

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <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, email=no">
    <meta name="wap-font-scale" content="no">
    <meta name="renderer" content="webkit">
    <meta name="screen-orientation" content="portrait">
    <meta name="x5-orientation" content="portrait">
    <meta name="msapplication-tap-highlight" content="no">
    <title>标题</title>
    <!--初始化样式文件（详细内容见下）-->
    <link rel="stylesheet" href="css/mc-reset.css">     
    <!--自定义样式文件-->
    <link rel="stylesheet" href="css/app.css">           
    <!--jq插件（默认引用cdn库，如果引用失败则加载本地jq插件）-->
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
    <script>window.jQuery || document.write('<script src="js/jquery-3.2.1.min.js"><\/script>')</script>
    <!--rem转换插件（详细内容见下）-->
    <script src="js/rem-toggle.js"></script>
</head>
<body>


 <!-自定义JS文件-->
<script src="js/app.js"></script>
</body>
</html>

--->JS内容:

rem转换文件

(function(){
    var currClientWidth, fontValue, originWidth = 720;

    function __resize() {
        currClientWidth = document.documentElement.clientWidth;
        if (currClientWidth > 768) currClientWidth = 768;
        if (currClientWidth < 320) currClientWidth = 320;
        fontValue = ((625 * currClientWidth) / originWidth).toFixed(2);
        document.documentElement.style.fontSize = fontValue + '%';
    }
    __resize();
    
    window.addEventListener('resize', __resize, false);
})();

--->CSS内容：

初始化样式文件

@charset "utf-8";

/* 改变盒子模型渲染方式 */
* { box-sizing: border-box; }

/* 清除边距 */
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td, span, input, textarea {
    margin: 0;
    padding: 0;
}

/* 清除列表默认样式 */
li, ol { list-style: none; }

/* 斜体扶正 */
i, em { font-style: normal; }

/* 清除链接下划线 */
a { text-decoration: none; }

/*移除表单及按钮原生样式*/
input, textarea, select { -webkit-appearance: none; }
input:focus, textarea:focus, select:focus { outline: none; }

/*禁用Webkit内核浏览器的文字大小调整功能、禁用ios点击元素高亮*/
html {
    font-family: 'microsoft yahei';
    -webkit-text-size-adjust: none; 
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
.clear-fix:after{ content:' '; display:block; height:0; clear:both; visibility:hidden }

注意事项：

模板链接（密码：qmw4）

最后编辑于：2017.11.28 16:42:24