首页html+css实现电脑端显示(隐藏)手机端隐藏(显示)

html+css实现电脑端显示(隐藏)手机端隐藏(显示)

时间: 2023-08-20 19:04:08 浏览: 50

可以使用CSS3中的媒体查询（Media Queries）来实现根据设备不同显示或隐藏某些元素。示例代码如下： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Responsive Demo</title> <style> /* 默认样式 */ .pc-show { display: block; } .mobile-show { display: none; } /* 在小屏幕设备（如手机）上隐藏默认样式 */ @media screen and (max-width: 767px) { .pc-show { display: none; } .mobile-show { display: block; } } </style> </head> <body> <h1 class="pc-show">这个标题在电脑端显示，手机端隐藏</h1> <h1 class="mobile-show">这个标题在手机端显示，电脑端隐藏</h1> </body> </html> ``` 上面的代码中，我们定义了两个样式类：`.pc-show`用于电脑端显示，`.mobile-show`用于手机端显示。默认情况下，`.pc-show`显示，`.mobile-show`隐藏。然后，通过媒体查询，在小屏幕设备上（如手机），将`.pc-show`隐藏，`.mobile-show`显示。这样就实现了根据设备不同显示或隐藏某些元素的效果。