简单地响应式布局----CSS3中的Media Query（媒介查询）

最新推荐文章于 2022-04-01 20:07:56 发布

原创最新推荐文章于 2022-04-01 20:07:56 发布 · 770 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#布局 #响应式 #html5 #css3

html5 同时被 2 个专栏收录

28 篇文章

订阅专栏

css

20 篇文章

订阅专栏

本文介绍了如何使用CSS媒体查询创建响应式网页布局，根据不同屏幕宽度应用不同样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<style >

    @media screen and (min-width: 680px){   屏幕宽度大于680的布局
        #div_1{
            background-color: black;
            height: 200px;
            width: 200px;
        }
    }
    @media screen and (min-width: 480px) and (max-width: 680px){  屏幕宽度大于480小于680的布局
        #div_1{
            background-color: aqua;
            height: 400px;
            width: 400px;
        }
    }

    @media screen and (max-width: 480px){       屏幕宽度小于480的布局
        #div_1{            background-color: red;            height: 400px;            width: 400px;        }    }</style><body><div id="div_1"> </div></body></html>