pc浏览器显示图片1，移动平台显示图片2，完整的一套html

宿迁大志

已于 2023-08-26 06:43:38 修改

阅读量92

点赞数 1

文章标签： html 前端

于 2023-08-26 06:42:06 首次发布

本文链接：https://blog.csdn.net/dzg842400/article/details/132507205

版权

当用户在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>