桌面和移动设备中的不同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接管。此外，必须有像这样一个space之间@media(max-width: 320px)：

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

    #myImage { 
    width: 180px; 
    } 
}