Question

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

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/

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

1 个答案: