+
95
-

css3中容器查询与媒体查询有什么区别?

请问css3中容器查询与媒体查询有什么区别?

网友回复

+
15
-

容器查询是根据容器的大小来设置样式

媒体查询是根据设备的可视长宽来设置样式

下面两个例子,第一个是媒体查询,第二个是容器查询,实现的效果都是自适应,小于300px的时候横向布局,大于300px的时候列布局。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>

    <style>


        .child {

            background: rgb(231, 227, 227);
            padding: 1em;
            font-size: 18px;
        }
@media (max-width: 300px) {}
@media (min-width: 768px) {
            .container {
                display: flex;


            }
            .child {

                width: 33.33%;
            }

        }

    </style>
</head>
<body>
    <div class="container">
        <div class="child child1">
           
     ...

点击查看剩余70%

我知道答案,我要回答