媒体查询

最新推荐文章于 2024-06-28 17:35:49 发布

阳光下的冷静

最新推荐文章于 2024-06-28 17:35:49 发布

阅读量299

点赞数 2

分类专栏： css 文章标签：媒体查询响应式布局

本文链接：https://blog.csdn.net/m0_37686205/article/details/84633844

版权

css 专栏收录该内容

53 篇文章 0 订阅

订阅专栏

什么是媒体查询？

媒体查询是移动端和pc端共有的，一种针对响应式容器下，不同的屏幕区间设置不同布局和样式的技术

使用媒体查询：

使用媒体查询的目的是在不同大小屏设备下，设置不同的样式。主要是在css样式中设置代码：

@media  screen and (min-width: 最小宽度 ) and (max-width: 最大宽度){属性样式}

媒体查询案例：

案例要求：

在超小屏设备时，即屏幕宽度在768px以下，设置当前的容器的宽度为100%,背景色为蓝色
在小屏设备时，即屏幕宽度在768px-992px，这时需要用到版心的设置，只要版心的宽度小于屏幕的最小宽度时，就不会出现滚动条，所以设置当前的容器的宽度为750px,背景色为绿色
在中屏设备时，即屏幕宽度在992px-1200px，同上，设置当前的容器的宽度为970px,背景色为红色
在大屏设备时，即屏幕宽度在1200px以上，同上，设置当前的容器的宽度为1170px,背景色为黄色

具体代码如下:

 body{
            margin: 0;
            padding: 0;
        }
        .container{
            width: 1000px;
            margin: 0 auto;
            height: 1000px;
            background: pink;
        }
        @media  screen and (max-width: 768px) and (min-width: 320px){
            .container{
                width: 100%;
                background: blue;
            }
        }
        @media screen and (max-width: 992px) and (min-width: 768px) {
            .container{
                width:750px ;
                background: green;
            }
        }
        @media screen and (min-width: 992px) and (max-width: 1200px){
            .container{
                width: 970px;
                background: red;
            }
        }
        @media screen and (min-width: 1200px) {
            .container{
                width: 1170px;
                background: yellow;
            }
        }
    </style>
</head>
<body>
<div class="container">
</div>

打开浏览器，将浏览器的宽度调大调小，会看到不一样的背景颜色。

阳光下的冷静

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
媒体查询

什么是媒体查询？媒体查询是移动端和pc端共有的，一种针对响应式容器下，不同的屏幕区间设置不同布局和样式的技术使用媒体查询：使用媒体查询的目的是在不同大小屏设备下，设置不同的样式。主要是在css样式中设置代码：@media screen and (min-width: 最小宽度 ) and (max-width: 最大宽度){属性样式}媒体查询案例：案例要求：在超小屏...
复制链接

扫一扫

专栏目录