前端 CSS 开发随笔

移动端适配

隐藏或显示页面内容

有些页面内容适合在 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 类就会生效