Html 我的中小型移动电话应答器不工作？我需要使用什么属性

我对中小型移动设备的响应不起作用？我需要使用什么属性。我使用的是firefox。如果我收缩浏览器进行测试，则徽标没有针对移动设备进行调整。对于测试，我已使用背景黄色。黄色即将出现，但移动设备的图像没有收缩。我使用了宽度：250px；对于小型移动设备，您可以测试链接。谁能指导我下一步做什么

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

我的html代码：
default.css
@字符集“utf-8”；
身体
{
保证金：自动；
背景色：#中交；
背景重复：重复；
}
#包装纸
{
宽度：1000px；
高度：自动；
保证金：自动；
}
#标志
{
宽度：500px；
高度：100px；
浮动：左；
}
#标识1
{
宽度：400px；
高度：80px；
浮动：左；
左侧填充：50px；
右边填充：50px；
背景色：#FF00FF；
}
#菜单
{
宽度：1000px；
高度：45px；
浮动：左；
}
常见的
{
宽度：200px；
高度：42px；
填充顶部：8px；
浮动：左；
背景色：#FFFFFF；
背景重复：无重复；
文本对齐：居中；
}
mobile.css
@仅介质屏幕和（最大宽度：530像素）
{
#包装纸
{
宽度：260px；
背景重复：重复；
}
#标志
{
宽度：260px；
文本对齐：居中；
背景色：#FFFF00；
}
#标识1
{
宽度：160px；
左侧填充：50px；
右边填充：50px；
}
#菜单
{
宽度：260px；
高度：自动；
}
}

在响应性设计中使用

px

，这确实不太好

只需将此属性添加到css中

img {
  width: 100% !important;
}

---

我的建议是在任何地方使用

%

和

em

避免

px

图像未正确收缩的原因是，只选择了#logo，只设置了图像容器的宽度，而不是图像本身的宽度

如果添加此css：

#logo img { width:260px; }

进入你的反应规则，那么你应该是好去

此外，如果您想更改平板电脑设备的图像，我建议您使用以下方式：

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

---

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

将其添加到移动css中

#logo img{
    max-width:100%;
}

---

演示

您的链接似乎已断开。是的，它正在工作。您检查相同的链接。如果我想为大型移动设备和平板电脑制作我需要编写的媒体查询，请执行相同的操作。我正在考虑如何制作菜单。如果我单击一个图像。如切换效果我更新了我的答案，以包括一个可接受的平板电脑设备的媒体查询。是的，我得到了这个问题。我的最后一个问题是如何制作菜单。当我单击一个图像时，它具有切换效果。或者通常我如何制作菜单。我对此没有任何想法。你能写一个小的吗你能帮我用手机的css菜单吗。