我有一个 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 规则,使用类来添加显示修改,有人能解释一下为什么他们不从我的智能手机加载图像吗?
最佳答案
改用媒体查询。喜欢:
@media only screen and (max-width: 479px) {
}
或
以设备的 min-width
和 max-width
之间的特定宽度为目标
@media only screen and (min-width: 320px) and (max-width: 479px) {
}
像这样使用它:
关于android - CSS 图像/背景无法在智能手机上启动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40509598/