桌面和移動設備中不同的img大小

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)因為當寬度減小到320px以下時，您希望移動CSS接管。 此外，@ @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; 
    }  
}