@media

kevin_cat

已于 2024-01-09 14:52:45 修改

阅读量458

点赞数 7

CC 4.0 BY-SA版权

文章标签： css javascript css3

于 2024-01-09 14:51:48 首次发布

本文链接：https://blog.youkuaiyun.com/kevin_cat/article/details/135480249

本文介绍了CSS中的媒体查询如何应用于响应式设计，通过示例展示了如何根据屏幕宽度调整背景颜色，并在移动端隐藏某些字段。

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

not :否定媒体查询，必须制定媒体类型

only

and :就是全部满足菜执行

，：有一个满足就成立，等价于or

如果文档宽度小于 300 像素则修改背景颜色(background-color):

@media screen and (max-width: 300px) {    body {
	       
	background-color:lightblue;    }}

如果像素小于700,怎隐藏字段

<!-- 移动端 -->
<style scoped>
@media only screen and (max-width: 700px) {
    /* .clearfix::after{
        content: '';
        display: block;
        clear: both;
    } */
    .head-logo {
        width: 50px !important;
        height: 50px !important;
        margin-left: 30px !important;
    }
    .logo {
        display: block !important;
        width: 180px;
        height: 50px;
        float: right;
        margin-top: 10px !important;
        margin-right: 80px !important;
    }
    #student .list {
        display: block !important;
    }
    .list li:last-of-type {
        padding: 0 10px !important;
        margin: 0 10px !important;
    }
    .msg {
        z-index: 999;
    }
    .practice{
        display: none;
    }
}
</style>