这是我的wordpress:http://shopmanouchek.com
如果您在桌面模式下查看它,一切都很好,但在智能手机模式下存在问题。标题图像无响应。
这是徽标的代码:
#header{
background-image: url(http://img15.hostingpics.net/pics/989373manouchekc.png);
background-repeat: no-repeat;
background-position: center;
}
我试图添加
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
在我的手机上看起来不错,但现在桌面视图中的徽标现在完全超大
萨尔曼 上面已经提到了媒体查询,这里有一个简短的概述 http://css-tricks.com/css-media-queries/
以及在实践中如何运作的一个例子
#header {
background-image: url(http://img15.hostingpics.net/pics/989373manouchekc.png);
background-repeat: no-repeat;
background-position: center;
}
@media all and (max-width: 480px) /*or whatever width you want the change to take place at*/ {
#header {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
}