网站首页HTML/CSS
移动端网页基础模板

<!doctype html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1">
    <title>移动端网页基础模板</title>
    <link type="text/css" rel="stylesheet" href="./static/css/common.css">
    <style>
        :root {
            --color-blue: #10aeff;
            --color-green: #07c160;
            --color-red: #fa5151;
            --color-yellow: #ffc300;
            --color-white: #fff;
            --font-color-primary: #181818;
            --font-size-large: 44rem;
            --font-size-primary: 34rem;
            --font-size-small: 28rem;
            --font-size-smaller: 24rem;
            --gap-size: 24rem;
            --color-primary: #07c160; /* 主色调 */
            --border-radius: 8rem;
        }

        @media (-webkit-min-device-pixel-ratio: 1),(min-resolution: 1dppx) {
            :root {
                --border-1px: 1px;
            }
        }

        @media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 2dppx) {
            :root {
                --border-1px: 0.5px;
            }
        }

        @media (-webkit-min-device-pixel-ratio: 3),(min-resolution: 3dppx) {
            :root {
                --border-1px: 0.33333333px;
            }
        }

        @media (-webkit-min-device-pixel-ratio: 4),(min-resolution: 4dppx) {
            :root {
                --border-1px: 0.25px;
            }
        }

        @media (-webkit-min-device-pixel-ratio: 5),(min-resolution: 5dppx) {
            :root {
                --border-1px: 0.2px;
            }
        }

        * {
            border: none;
            color: var(--font-color-primary);
            font-family: Microsoft YaHei, 黑体, 宋体, Arial, sans-serif;
            font-size: var(--font-size-primary);
            line-height: 1;
            list-style: none;
            margin: 0;
            outline: 0;
            padding: 0;
            resize: none;
            text-align: left;
            -webkit-text-size-adjust: none
        }

        html {
            font-size: calc(100vw / 750)
        }

        body {
            background: #fff
        }

        a {
            color: var(--font-color-primary);
            text-decoration: none;
            -webkit-tap-highlight-color: rgba(255, 255, 255, 0)
        }

        .hidden {
            display: none
        }

        .clear {
            clear: both;
            font-size: 0;
            height: 0;
            line-height: 0;
            width: 750rem
        }

        .head {
            align-items: center;
            background: #cce8cf;
            display: flex;
            height: calc(702rem * .618);
            justify-content: center;
            margin: 24rem 0 0 24rem;
            width: 702rem;
            border-radius: var(--border-radius);
        }

        .body {
            align-items: center;
            background: #cce8cf;
            display: flex;
            height: calc(702rem * 1.618);
            justify-content: center;
            margin: 24rem 0 0 24rem;
            width: 702rem;
            border-radius: var(--border-radius);
        }

        .foot {
            align-items: center;
            background: #cce8cf;
            display: flex;
            height: calc(702rem * .618);
            justify-content: center;
            margin: 24rem 0 0 24rem;
            width: 702rem;
            border-radius: var(--border-radius);
        }

        .font-size-large {
            font-size: var(--font-size-large);
            margin: 24rem 0 0 24rem
        }

        .font-size-primary {
            font-size: var(--font-size-primary);
            margin: 24rem 0 0 24rem
        }

        .font-size-small {
            font-size: var(--font-size-small);
            margin: 24rem 0 0 24rem
        }

        .font-size-smaller {
            font-size: var(--font-size-smaller);
            margin: 24rem 0 24rem 24rem
        }

        .buttons {
            margin: 24rem 0 24rem 24rem;
            padding: 0 0 24rem 0;
            width: 702rem;
            display: flex;
            /*background: #cce8cf;*/
            flex-direction: column;
            flex-wrap: nowrap;
            align-items: center;
            border-radius: var(--border-radius);
        }

        .button-large {
            background: var(--color-primary);
            font-size: var(--font-size-primary);
            margin: 24rem 0 0 0;
            padding: 23rem 0;
            min-width: 368rem;
            text-align: center;
            color: var(--color-white);
            border-radius: var(--border-radius);
        }

        .button-large:hover {
            background: red;
        }

        .button-large:active {
            background: blue;
        }

        .button-large:disabled {
            cursor: not-allowed;
            background: #F2F2F2;
            color: #C6C6C6;
        }
    </style>
</head>
<body>
<!----------------------------------------------------------------------------------------------------
说明
1、设备宽度统一为750rem，左右两端留白间隙均为24rem，故实际可用宽度为702rem。
2、主要字体大小为34rem，应用场景举例：文章正文、列表内标题。
---------------------------------------------------------------------------------------------------->
<div class="head">head</div>
<div class="body">body</div>
<div class="foot">foot</div>
<div class="clear hidden"></div>
<div class="font-size-large">large：零壹贰叁肆伍陆柒捌玖拾</div>
<div class="font-size-primary">primary：零壹贰叁肆伍陆柒捌玖拾</div>
<div class="font-size-small">small：零壹贰叁肆伍陆柒捌玖拾</div>
<div class="font-size-smaller">smaller：零壹贰叁肆伍陆柒捌玖拾</div>
<div class="buttons">
    <button class="button-large">大·推荐·正常态</button>
    <button class="button-large" disabled>大·推荐·禁用态</button>
</div>
<script type="text/javascript" src="./static/js/common.js"></script>
</body>
</html>