-媒体查询

最新推荐文章于 2024-10-04 19:18:59 发布

巧克力棒好好吃喔

最新推荐文章于 2024-10-04 19:18:59 发布

阅读量90

点赞数

文章标签：媒体 css css3

本文链接：https://blog.csdn.net/qiaokelibangwo/article/details/124871717

版权

本文介绍了媒体查询在响应式网页设计中的应用，通过示例展示了如何根据设备宽度设置不同样式，确保移动端布局不超过规定大小，并实现元素的显示与隐藏。通过媒体查询，可以实现不同屏幕尺寸下背景颜色、字体大小及元素布局的动态调整，提升用户体验。

摘要由CSDN通过智能技术生成

媒体查询能够根据设备宽度的变化，设置差异化样式。

媒体特性常用写法

宽度大于等于768px 为粉色 
@media (min-width: 768px) {
    body {
        background-color: pink;
    }
}
宽度@media (min-width: 992px) {
    body {
        background-color: skyblue;
    }
}

媒体查询使用场景

1 约束移动端不要超过规定大小

body {
    max-width: 540px;
    margin: 0 auto;
}

大于等于540px 则不允许  html文字大小再改动，强制定为 54px
@media (min-width: 540px) {
    html {
        font-size: 54px !important;
    }
}

2 媒体查询使用场景

元素的显示和隐藏

宽度小于800px时隐藏.box里的第二个div盒子
@media (max-width: 800px) {
    .box div:nth-child(2) {
        display: none;
    }

    .box div:last-child {
        width: 350px;
    }
}