Question

如果您在桌面模式下查看它，一切都很好，但在智能手机模式下出现问题。标题图片没有响应。

以下是徽标的代码：

#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;

我的手机看起来不错，但现在桌面视图中的徽标现已完全超大

Answer 1

Salman A上面已经提到的媒体查询，这是一个简短的概述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; 
 }
}

Wordpress：使背景图像响应

1 个答案: