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 CODE

@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

您未在媒体查询中定位图片（.img），但似乎有.dg-img选择器。因此，您可能需要做的就是将媒体查询中的“.dg-img”更改为“.img”。

修改：同时将媒体查询置于“默认”样式下方。

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

Answer 2

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

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

工作fiddle

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

HTML代码

CSS CODE

2 个答案: