盒模型特征和媒体查询 -

媒体查询

代码：

<!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>
        button{
            background-color:bisque;
        }
        button:hover{
            cursor:help;
            opacity: 0.1;
            transition: 0.3s;
            background-color: aqua;
        }
        .small  {
            font-size: 3rem;
        }
        .large{
            font-size: 4rem;
        }
        @media (max-width:300px) {
            html{
                font-size: 10px;
            }
        }
        @media (min-width:301px) and (max-width:500px) {
            html {
                font-size: 30px;
            }
        @media (min-width:501px) {
            html{
                font-size: 50px;
            }  
        }
        }
    </style>
</head>
<body>
    <button class="small">小</button>
    <button class="large">大</button>
</body>
</html>

rem和em的区别：

<!DOCTYPE html>
<html lang="zh-CN">
<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>
    <!-- px: 像素,绝对单位, 1in = 96px -->
    <!-- em,rem,vh,vw: 相对单位 -->
    <div>
        <span>Hello</span>
    </div>
    <style>
        html {
            font-size: 10px;
            /* 在根元素中设置的字号,在其它地方引用是使用rem,并且这个值是不变的 */
            /* 因为一个页面,只有一个根元素, html  */
            /* 1rem = 10px */
        }
        div {
            /* font-size: 32px; */
            /* 1em = 16px */
            /* 32px = 2em */
            font-size: 3rem;
        }
        div span {
            /* font-size: 2em; */
            /* 2em = 2*16=32px */
            /* 但是 em在父元素中被重新定义了, 1em = 30px  */
            /* 2em = 60px */
            /* em总是随着自身或父元素的字号发生变化,在布局时会显得非常的混乱 */
            /* font-size: 20px; */
            font-size: 2rem;
        }
    </style>
</body>
</html>