web------------媒体查询

最新推荐文章于 2022-12-17 23:22:32 发布

Cl_Daisy

最新推荐文章于 2022-12-17 23:22:32 发布

阅读量402

点赞数

分类专栏： web 文章标签：响应式

本文链接：https://blog.csdn.net/cl_daisy/article/details/78100846

版权

web 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

媒体查询的定义和使用
使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .a{
                border: 1px solid #000000;
                width: 100px;
                height: 100px;
                background-color: #000000;
            }

            @media only screen and (min-width: 300px) and (max-width: 640px) {
                .a{
                    background-color: red;
                }
            }

            @media only screen and (min-width: 700px) {
                .a{
                    background-color: green;
                }
            }

            @media only screen and (max-width:200px ) {
                .a{
                    background-color: blue;
                }
            }
        </style>
    </head>
    <body>
        <div class="a"></div>
    </body>
</html>