html - 我对中小型移动设备的响应不工作？我需要使用什么属性

Question

我对中小型移动设备的响应不工作？我需要使用什么属性。我正在使用 firefox。如果我缩小浏览器进行测试。 Logo 未针对移动设备进行调整。为了测试，我已经实现了背景黄色.黄色来了，但移动设备上的图像没有缩小。我使用了宽度:250px；对于小型手机。您可以测试链接。 http://vkacademy.in/res/ .有人可以指导我接下来要做什么吗？

my html code:
<div id="wrapper">
<div id="logo"><img src="image/logo.png"  border="0" width="357" height="107"/></div><!--endoflogo-->
<div id="logo1"><a href="#">join as tutor or Institutue</a></div><!--endoflogo1-->
<div id="menu">
<div class="common"><a href="#">About us</a></div>
<div class="common"><a href="#">Department</a></div>
<div class="common"><a href="#">Facilities</a></div>
<div class="common"><a href="#">library</a></div>
<div class="common"><a href="#">Event</a></div>
</div><!--endofmenu-->
</div><!--endofwrapper-->
default.css
@charset "utf-8";
body
{
margin:auto;
background-color:#CCCCCC;
background-repeat:repeat;
}
#wrapper
{
width:1000px;
height:auto;
margin:auto;
}

#logo
{
width:500px;
height:100px;
float:left;
}
#logo1
{
width:400px;
height:80px;
float:left;
padding-left:50px;
padding-right:50px;
background-color:#FF00FF;
}

#menu
{
width:1000px;
height:45px;
float:left;
}

.common
{
width:200px;
height:42px;
padding-top:8px;
float:left;
background-color:#FFFFFF;
background-repeat:no-repeat;
text-align:center;
}


mobile.css
    @media only screen and (max-width:530px)
    {
    #wrapper
        {
        width:260px;
        background-repeat:repeat;
        }

        #logo
        {
        width:260px;
        text-align:center;
        background-color:#FFFF00;
        }

        #logo1
        {
        width:160px;
        padding-left:50px;
        padding-right:50px;
        }

      #menu
      {
      width:260px;
      height:auto;
      }
    }

Answer 1

你的图片没有正确缩小的原因是因为通过只选择#logo你只设置了图片容器的宽度，而不是图片本身。

如果你添加这个css:

#logo img { width:260px; }

进入你的响应规则，那么你应该可以开始了!

此外，如果您想更改平板设备的图像，那么我建议您使用如下方式:

@media only screen 
  and (min-device-width : 768px) 
  and (max-device-width : 1024px) {
  /* tablet CSS here */
}

可以找到有关媒体查询的其他信息 here .