桌面和移动设备中的不同图像尺寸

Question

我有下表显示产品图片。在桌面视图中，我想显示图像的原始大小，而在移动版本中，我想显示 180px 并将其居中。

代码如下：

<h2><?php echo $product->product_name; ?></h2>
<div class="panel panel-default">
  <div class="panel-body">
    <table class="table">
        <tr><th></th><td ><img id="myImage" src="<?php echo CRM_URL; ?>img/product_images/<?php echo $product->product_image; ?>"  /></td></tr>
        <tr><th>Model Number</th><td><?php echo $product->product_model_number; ?></td></tr>
        <tr><th>Category</th><td><?php echo $product->category; ?></td></tr>
        <tr><th>Brand</th><td><?php echo $product->product_brand; ?></td></tr>
        <tr><th>Price</th><td><?php echo $price; ?></td></tr>
        <tr><td colspan="2"><?php echo $cartForm; ?></td></tr>            
    </table>
    </div>
</div>

和 CSS 代码：

@media(min-width: 320px) {
    .product_search_textbox {
        width: 100px;
    }
    #header div.topbar{
        height: 150px;
    }
    .homepage-slider-content{
        margin-top:18px;
    }

    #myImage { 
        width: 180px; 
    }  
}

我仍然无法在移动视图中更改图像，有人可以帮我吗？我做错了什么？

Answer 1

首先，它应该是(max-width: 320px)，因为您希望移动CSS 在宽度减小到320px 以下时接管。此外，@media 和(max-width: 320px) 之间必须有一个space，如下所示：

@media (max-width: 320px) {
    .product_search_textbox {
        width: 100px;
    }
    #header div.topbar{
        height: 150px;
    }
   .homepage-slider-content{
    margin-top:18px;
    }

   #myImage { 
    width: 180px; 
    }  
}