CSS图像/背景不会在智能手机上启动？答案

【问题标题】：CSS images/background won't start on smartphone?CSS图像/背景不会在智能手机上启动？
【发布时间】：2017-03-23 10:02:38
【问题描述】：

我有一个 HTML 页面，正文带有 CSS 样式表。它适用于我电脑上的所有浏览器（IE、Chrome、Firefox 和 Opera），但是从我的智能手机（Android 4.4.2）打开它，背景和身体图像将无法加载，而其他规则则很有效。

这是我的@media 背景规则：

        <style type="text/css" rel="stylesheet" media="all">

.headerone {width:900px;
                    height:300px;
                    margin-left:243px;
                    text-align:center;
                    background-color:transparent;
        }

    .thead {font-family:"Traditional Arabic";
        font-size:60px;
        text-align:left;
        color:#A30B0B;
}

.pic {margin-left:10px;
    border-radius:12px;
    margin-top:10px;
}

body {background-image:url("sf1.jpg");
        background-repeat:no-repeat;
        background-size:cover;
        background-attachment:fixed;

}

.ex {font-family:"Traditional Arabic";
    font-size:24px;
    text-align:center;

}



.toolbar
    {width:1200px;
    height:100px;
    display:block;
    margin:auto;
    text-align:center;
    font-family:Verdana;
    font-size:16px;
    background-color:#74391F;
    text-decoration:none;
    color:white;
    border-radius:12px;
    background-attachment:fixed;

}

.downbarcon, a:link{
                    display:inline-block;
                    text-align:center;
                    text-decoration:none;
                    color:white;
                }

.downbarcon, a:hover, a:visited, a:active{background-color:#B29090;
                                            color:white;
                                            text-decoration:none;

                                        }

a:link {
padding:0px 10px;
word-wrap:normal;
display:inline-block;}

.downbar{
        position:relative;
        display:inline-block;
        }

.downbarcon{
            display:none;
            position:absolute;
            width:260px;
            box-shadow: 8px 4px black;
            background-color:#74391F;
            }

.downbar:hover .downbarcon{
                        display:block;
                        background-color:#74391F;
                        }

#datas{margin-left:300px;
        width:800px;
        text-align:left;
        font-family:"Traditional Arabic";
        font-size:18px;
        background-color:beige;
}   

p {font-family:"Traditional Arabic";
    font-size:18px;
    margin-left:20px;
}

#frie {width:500px;
        margin-left:470px;
        background-color:white;
        border-radius:16px;
        font-family:"Traditional Arabic";
        font-size:18px;
        text-align:center;
    }

.fot{width:200px;
    height:100px;
    text-decoration:none;
    }

.foot, .foot:link{
            text-decoration:none;
            background-color:transparent;
            text-align:left;

}   

.like,  .like:link, .like:hover, .like:active, .like:visited {          
        text-decoration:none;
        background-color:blue;
        color:white;
        font-family:verdana;
        font-size:12px;
        margin-left:10px;
        border-radius:12px;
        border-right:3px solid white;
        border-left:3px solid white;
        border-top:3px solid white;
        border-bottom:3px solid white;
}

.log {
    border-radius:12px;
    background-color:blue;
    width:25px;
    height:25px;
    }


.footer, .tess {
            width:1200px;
            margin:auto;
            display:block;
            text-align:center;
            font-size:12px;
            background-color:#A5978A;
            color:black;
        }

我对图像使用普通的 html 规则，使用类来添加显示修改，谁能解释我为什么他们不会从我的智能手机加载图像？

【问题讨论】：

请将示例代码发布到jsfiddle.net，以便我提供帮助
jsfiddle.net/cpmfyuws/1 这里有示例代码。
如我所见，问题不在于标签，只是图像无法加载。另外，图像在文档 html 的同一个文件夹中，没有源路径（如 C:/Users/etc///img），所以，这只是我的智能手机的问题吗？
哦，你应该使用accessible image url 并使用像“/img/imagename.jpg”这样的动态链接。当前 url C:/Users/etc///img 无法访问，因为它在您的计算机中，而不是您的手机中。
HTML 文件和图像使用云存储从我的电脑存储到我的智能手机。我不需要使用动态链接，只需将“img.jpg”放入适当的标签中。此解决方案适用于我的电脑，但不明白为什么不显示在我的智能手机中。

标签： android html css media-queries

【解决方案1】：

改用媒体查询。喜欢：

@media only screen and (max-width: 479px) {

}

或

定位设备的min-width 和max-width 之间的特定宽度

@media only screen and (min-width: 320px) and (max-width: 479px) {

}

像这样使用它：

https://jsfiddle.net/cpmfyuws/2/

【讨论】：