响应式网页必备——media媒体查询

最新推荐文章于 2023-08-01 18:06:30 发布

闲逛上海滩

最新推荐文章于 2023-08-01 18:06:30 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML&CSS

本文链接：https://blog.youkuaiyun.com/oscar92420aaa/article/details/51878153

HTML&CSS 专栏收录该内容

54 篇文章

订阅专栏

本文详细介绍了CSS媒体查询的使用方法，包括如何针对不同设备分辨率设置样式。通过具体示例展示了如何根据不同屏幕尺寸调整元素宽度。

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

@media all and (min-width:xxx) and (max-width:xxx){/*这段查询的all是针对所有设备(有些设备不一定是屏幕，也许是打字机，盲人阅读器)*/}@media only screen and (min-width:xxx) and (max-width:xxx){/*上面针对了所有设备，这段是只(only)针对彩色屏幕设备*/}
还有个一是#media screen and (min-width:xxx) 
/*上面针对了所有设备，这段是彩色屏幕设备*/
例如
<style>
.test1{
    width:1024px;
}
@media screen and (min-width:1024px){
.test1{
    width:1024px;
}
}

@media screen and (max-width:1024px){
.test1{
    width:720px;
}
}

@media screen and (max-width:720px){
.test1{
    width:480px;
}
}
</style>
<div class="test1">
</div>
意思是：当你设备分辨率(或者浏览器大小，根据浏览器拖放大于1024时)为大于1024px，test1显示为1024px;
当你设备分辨率(或者浏览器大小，浏览器拖放小于1024大于720时)为大于720px小于1024px时，test1显示为720px;
当你设备分辨率(或者浏览器大小。。。。)为小于720px时，test1显示为480px;