前端 CSS 开发随笔

发表于 阅读次数： 评论数： 本文字数： 234 阅读时长 ≈ 1 分钟

移动端适配

隐藏或显示页面内容

有些页面内容适合在 PC 端显示，但是不适合在移动端显示（比如盒子过大，遮挡内容）或者在移动端显示毫无意义等，此时可以使用下面的 CSS 代码来实现：PC 端显示，移动端隐藏

1
2
3
4
5
6
7
<body>
    <div class="wapnone">移动端要判断隐藏的内容</div>
    <div class="tool_cai">移动端要判断隐藏的内容</div>
    <div class="tool_code">移动端要判断隐藏的内容</div>
    <div class="tool_zan">移动端要判断隐藏的内容</div>
    <div id="player">移动端要判断隐藏的内容</div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/* 调用单个class */
@media screen and (max-width: 1221px) {
    .wapnone {
        display: none;
    }
}

/* 调用多个class */
@media screen and (max-width: 1221px) {
    .tool_cai, .tool_code, .tool_zan {
        display: none;
    }
}

/* 调用id */
@media screen and (max-width: 1221px) {
    #player {
        display: none;
    }
}

提示

1、1221px 是屏幕的宽度，具体数值可以自行调试
2、max-width: 1221px 表示如果屏幕宽度在 1221 像素以下（移动端），则对应的 CSS 类就会生效
3、同理的，min-width: 1221px，表示如果屏幕宽度在 1221 像素以上（PC 端），则对应的 CSS 类就会生效