响应式布局：媒体查询

程序员文章站 2022-05-15 09:21:34

...

响应式布局：媒体查询


<!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>
</head>

<body>
    <!-- 媒体：屏幕，打印机
查询：查询当前的屏幕的宽度变化 -->
    <!-- 布局前提：宽度受限，高度不受限的空间进行布局。高和宽至少一个受限 -->
    <button class="btn small">按钮1</button>
    <button class="btn middle">按钮2</button>
    <button class="btn large">按钮3</button>

    <table border="1" width="500">
        <caption>
            广州市第八小学五年级六班
        </caption>
        <!-- 表头 -->
        <thead>
            <tr style="font-weight: bolder; text-align: center">
                <th>id</th>
                <th>name</th>
                <th>email</th>
                <th>password</th>
            </tr>
        </thead>
        <!-- 表格主体 -->
        <!-- tr*5>td*4{xx} -->

        <tbody style="font-weight: bolder; text-align: center">
            <tr>
                <td rowspan="2" bgcolor="cyan">xx</td>
                <td>xx</td>
                <td>xx</td>
                <td>xx</td>
            </tr>
            <!-- 第2行 -->
            <!-- 水平方向合并 -->
            <tr>
                <!-- <td>xx</td> -->
                <td>xx</td>
                <!-- <td colspan="3" bgcolor="lightgreen">xx</td>/ -->
                <td>xx</td>
                <td>xx</td>
            </tr>
            <!-- rowspan="3" bgcolor="cyan" -->
            <tr>
                <!-- 水平方向合并 -->
                <td colspan="4" bgcolor="lightgreen">xx</td>
                <!-- <td>xx</td>

                <td>xx</td>
                <td>xx</td> -->
            </tr>
            <tr>
                <td rowspan="2" bgcolor="cyan">xx</td>
                <td>xx</td>
                <td>xx</td>
                <td>xx</td>
            </tr>
            <tr>
                <!-- <td>xx</td> -->
                <td>xx</td>
                <td>xx</td>
                <td>xx</td>
            </tr>
        </tbody>
        <!-- 表尾 (表头和表尾都是可选的)-->
        <tfoot>
            <tr style="font-weight: bolder; text-align: center">
                <td>yy</td>
                <td colspan="3">yy</td>
                <!-- <td>yy</td>
                <td>yy</td> -->
            </tr>
        </tfoot>
    </table>
</body>

<style>
    td,
    th {
        border: 1px solid #000;
    }

    table {
        border-collapse: collapse;
        width: 90%;
        text-align: center;
        margin: 2em auto;
    }

    table caption {
        font-weight: bolder;
        margin-bottom: 1em;
    }

    tabel thead {
        background-color: rgb(128, 0, 0);
    }

    html {
        font-size: 10px;
    }

    .btn {
        background-color: seagreen;
        color: white;
        border: none;
        outline: none;
    }

    .btn:hover {
        cursor: pointer;
        opacity: 0.8;
        transition: 0.3s;
    }

    .btn.small {
        font-size: 1.2rem;
    }

    .btn.middle {
        font-size: 1.6rem;
    }

    .btn.large {
        font-size: 1.8rem;
    }
    /* 只要动态修改rem，就可以实现动态的改变按钮大小
    移动优先：从最小的屏幕开始进行适配 */
    /* 小于375px */

    @media only screen and (max-width: 374px) {
        html {
            font-size: 12px;
        }
    }
    /* 375-414px */

    @media only screen and (min-width: 375px) and (max-width: 414px) {
        html {
            font-size: 14px;
        }
    }
    /* 大于414px */

    @media only screen and (min-width: 415px) {
        html {
            font-size: 16px;
        }
    }
</style>

</html>

上一篇： 2.1TCP/Ip出现的背景及历史

下一篇：前端发展趋势之pwa

响应式布局：媒体查询

媒体查询、定位、Flex布局

解析web响应式布局中iframe自适应的方法

深入剖析响应式布局的原理

css3的@media属性实现页面响应式布局示例代码

Bootstrap禁用响应式布局的实现方法

CSS3移动端vw+rem不依赖JS实现响应式布局的方法

完美的响应式布局vw+vh+rem屏幕适配方案！

浅谈html5 响应式布局

Bootstrap禁用响应式布局的实现方法

CSS3移动端vw+rem不依赖JS实现响应式布局的方法