【CSS】媒体查询 -- 屏幕宽度自适应：@media

媒体查询

媒体查询的宽度顺序：

移动端：从小往大小
PC端：反过来，从大向小写

<!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>
    <style>
        /* REM
        root === html */
        html{
            /* 1rem = 10px; */
            font-size: 10px;
        }
        .btn{
            background:green;
            color: white;
            border: none;
            outline: none;
        }
        .btn:hover{
            cursor: pointer;
            opacity: 0.8;
            transition: 0.3;
        }
        .btn.small{
            font-size: 1.2rem;
        }
        .btn.middle{
            font-size: 1.6rem;
        }
        .btn.large{
            font-size: 1.8rem;
        }
        /* 媒体查询 */
        /* 1rem = 10px; , 1rem = 12px  */
        /* < 375px, 1rem = 12px; */
        /* 屏幕小于(最大)375px */
        @media (max-with){
            html{
                font-size: 12px;
            }
        }
        @media (min-width:375px) and (max-width:414px){
            html{
                font-size: 14px;
            }
        }
        @media (min-with:415px){
            html{
                font-size: 16px;
            }
        }
        /* 媒体查询的宽度顺序：
        1. 移动端：从小往大小
        2. PC端：反过来，从大向小写 
        */
    </style>
</body>
</html>

媒体查询

相关文章