移动端适配
隐藏或显示页面内容
有些页面内容适合在 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
| @media screen and (max-width: 1221px) { .wapnone { display: none; } }
@media screen and (max-width: 1221px) { .tool_cai, .tool_code, .tool_zan { display: none; } }
@media screen and (max-width: 1221px) { #player { display: none; } }
|
提示
1、1221px
是屏幕的宽度,具体数值可以自行调试
2、max-width: 1221px
表示如果屏幕宽度在 1221
像素以下(移动端),则对应的 CSS 类就会生效
3、同理的,min-width: 1221px
,表示如果屏幕宽度在 1221
像素以上(PC 端),则对应的 CSS 类就会生效