android - CSS 图像/背景无法在智能手机上启动？

Question

我有一个 HTML 格式的页面，其中包含用于正文的 CSS 样式表。它适用于我电脑上的每个浏览器(IE、Chrome、Firefox 和 Opera)，但是，从我的智能手机(Android 4.4.2)打开它时，背景和 body 图像不会加载，而其他规则则有效。

这是我的@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 规则，使用类来添加显示修改，有人能解释一下为什么他们不从我的智能手机加载图像吗？

Answer 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/