当用户在PC浏览器上访问时，显示图片1；当用户在移动平台上访问时，显示图片2。以下是一个完整的HTML代码示例：
<!DOCTYPE html>
<html>
<head>
<title>pc浏览器显示图片1，移动平台显示图片2，</title>
<style>
@media only screen and (max-width: 600px) {
.pc-image {
display: none;
}
}
@media only screen and (min-width: 601px) {
.mobile-image {
display: none;
}
}
</style>
</head>
<body>
<img class="pc-image" src="https://www.meishuzi.com/showImage/20230416/643bc4465298e.jpg" alt="图片1">
<img class="mobile-image" src="https://www.meishuzi.com/showImage/20230320/641814debba3e.jpg" alt="图片2">
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>pc浏览器显示图片1，移动平台显示图片2，</title>
<style>
@media only screen and (max-width: 600px) {
.pc-image {
display: none;
}
}
@media only screen and (min-width: 601px) {
.mobile-image {
display: none;
}
}
</style>
</head>
<body>
<img class="pc-image" src="https://www.meishuzi.com/showImage/20230416/643bc4465298e.jpg" alt="图片1">
<img class="mobile-image" src="https://www.meishuzi.com/showImage/20230320/641814debba3e.jpg" alt="图片2">
</body>
</html>
在这个示例中，使用CSS媒体查询根据屏幕宽度隐藏了一张图片。.pc-image类在最大宽度为600像素的屏幕上隐藏（移动设备），而.mobile-image类在最小宽度为601像素的屏幕上隐藏（PC浏览器）。您可以将src属性中的URL替换为您自己的图片URL。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
