12月27日媒体查询作业

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>媒体查询</title>
        <style>
            html {
                padding: 0;
                margin: 0;
                font-size: 10px;
            }
            .btn {
                background-color: seagreen;
                color: white;
                outline: none;
                border: none;
                border-radius: 3px;
                padding: 0.4rem 0.8rem;
            }
            .btn:hover {
                opacity: 0.8;
                cursor: pointer;
                transition: 0.3s;
            }
            .btn.small {
                font-size: 1.2rem;
            }
            .btn.middle {
                font-size: 1.6rem;
            }
            .btn.large {
                font-size: 1.8rem;
            }
            @media (max-width: 374px) {
                html {
                    font-size: 12px;
                }
            }
            @media (min-width: 375px) and (max-width: 414px) {
                html {
                    font-size: 14px;
                }
            }
            @media (min-width: 415px) {
                html {
                    font-size: 16px;
                }
            }
        </style>
    </head>
    <body>
        <button class="btn small">按钮1</button>
        <button class="btn middle">按钮2</button>
        <button class="btn large">按钮3</button>
    </body>
</html>
更多相关文章

随机推荐
