媒体查询不适用于响应式设计

Question

我正在使用画布图像进行图像显示，它在大型设备上效果很好，当涉及到小型设备时它没有响应，所以我使用媒体查询进行响应式设计，尽管使用媒体查询仍然图像没有响应。我正在使用 CSS 类，因为我将在网页的多个位置使用此图像布局请帮助我解决此问题！

提前致谢！

HTML 代码

<div class="img-container">
        <img class='img' src="http://lorempixel.com/320/480/" alt=""/>
        <canvas class="Canvas" width="320" height="480"></canvas>       
</div> 

CSS 代码

@media (min-width:480px) 
    {
        .img
        {
            margin-left: 30px;
            width: 120px;
            height: 120px;
            padding-top: 20px;
        }
        .img-container
        {
            display: inline-block;
            margin: 0 auto;
            background: #1e74ff;
            position: relative; 
        }
        .Canvas
        {
            position:relative;
            z-index:20;
            width:100px;
        }
    }
    body
    {
        text-align: center;
        background: #f2f6f8;
    }
    .img
    {
        position:absolute;
        z-index:1;
        margin-left: 103px;
        width: 350px;
        height: 428px;    
        padding-top: 20px;
    }
    .img-container
    {
        display:inline-block;
        width:320px; 
        height:480px;
        margin: 0 auto; 
        background: #1e74ff; 
        position:relative; 
    }
    .Canvas
    {
        position:relative;
        z-index:20;
    }

JSFiddle

Answer 1

您可以将媒体查询用于较小的屏幕并删除边距和填充，如果我的问题正确，我会设置宽度以适合父元素。

@media only screen and (max-width: 480px) {
    .img {
      top: 0;
      left: 0;
      margin-left: 0;
      width: 100%;
      height: auto;
      padding-top: 0;
    }
}

工作fiddle

Answer 2

您没有在媒体查询中定位您的图像 (.img)，而是似乎有一个 .dg-img 选择器。因此，您可能需要做的就是将媒体查询中的“.dg-img”更改为“.img”。

编辑：同时将您的媒体查询置于“默认”样式下方。

编辑 2：您的媒体查询可能有误。我假设小屏幕需要“max-width:480px”，而不是“min-width”