如何实现移动设备与桌面端显示不同版本的背景图片

• 媒体查询逻辑写反：当前规则是屏幕宽度≥769px（桌面端区间）才给.bgm类加载移动端背景图bgm.jpg，和需求完全相反
• 背景层元素无效：你给空div.bgm设置背景，但这个div没有设置宽高属性，根本无法铺满全屏，桌面端正常显示是因为背景直接挂在了html标签上，移动端的背景规则根本没生效到正确的元素上
• 移动端兼容问题：iOS Safari对background-attachment: fixed属性有已知兼容bug，直接使用会导致背景图拉伸、定位偏移、滚动时显示异常
• 存在大量无效代码：body末尾的style标签加了style="display: none !important"属性，会导致标签内的CSS完全不生效；引入的jQuery在纯背景占位页中没有任何作用，额外增加加载耗时；空的.bgmdiv没有实际作用。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>X</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="" />
    <meta name="author" content="">
    <style>
        * { margin: 0; padding: 0; }
        html, body {
            width: 100%;
            min-height: 100vh;
        }
        html { 
            /* 默认加载移动端适配背景图 适配移动优先加载逻辑 */
            background: url(images/bgm.jpg) no-repeat center center scroll; 
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }

        /* 屏幕宽度大于768px时 加载桌面端背景图 */
        @media screen and (min-width: 769px) {
            html {
                background: url(images/bg.jpg) no-repeat center center fixed;
            }
        }
    </style>
</head>
<body>
<!-- 纯背景占位页不需要额外内容 -->
</body>
</html>

• 断点规则：采用行业通用的768px宽度断点，宽度≤768px判定为手机等移动设备，宽度>768px判定为平板、笔记本、桌面设备，覆盖99%以上主流设备
• 背景挂载规则：全屏背景统一挂载到html根节点，同时给html、body设置100%视口高度，不需要额外添加空div作为背景层，减少冗余DOM
• 兼容处理：移动端下将background-attachment设为scroll，规避iOS Safari对fixed定位背景的兼容bug；桌面端保留fixed属性，保证滚动时背景固定不动
• 加载优化：采用移动优先的CSS编写逻辑，移动端默认加载小体积的移动端适配图，不需要额外加载桌面端大图，节省移动端用户流量

内容的提问来源于stack exchange，提问作者Geeky Gaj