Question

如果$（window）.width（）＆lt; = 1080，如何更改.product-thumb内部图像的宽度？我已经尝试将整个产品列表移动到jquery变量中，然后使用document.write，但这并不起作用。

<script>
    if( $(window).width() <= 1080 )
    {
        var myVar = '<link href="../style/mobistyle.css" rel="stylesheet" type="text/css">';
        }
    else{
        var myVar = '<link href="../style/style.css" rel="stylesheet" type="text/css">';
    }
</script>
<script type="text/javascript">
    document.write(myVar)
</script>
<!-- Products List Start -->
<?php
$results = $mysqli->query("SELECT product_code, product_name, product_desc, product_img_name, price FROM products ORDER BY id ASC");
if($results){ 
$products_item = '<ul class="products">';
//fetch results set as object and output HTML
while($obj = $results->fetch_object())
{
$products_item .= <<<EOT
    <li class="product">
    <form method="post" action="cart_update.php">
    <div class="product-content"><h3>{$obj->product_name}</h3>
    <div class="product-thumb"><img src="images/{$obj->product_img_name}" width="165" height="auto" ></div>
    <div class="product-info">
    Price {$currency}{$obj->price} 

    <fieldset>


    <label>
        <span>Quantity</span>
        <input type="text" size="2" maxlength="2" name="product_qty" value="1" />
    </label>

    </fieldset>
    <input type="hidden" name="product_code" value="{$obj->product_code}" />
    <input type="hidden" name="type" value="add" />
    <input type="hidden" name="return_url" value="{$current_url}" />
    <div align="center"><button type="submit" class="add_to_cart">Add</button></div>
    </div></div>
    </form>
    </li>
EOT;
}
$products_item .= '</ul>';
echo $products_item;
}
?>
<!-- Products List End -->

Answer 1

它在css文件中：

@media screen and (min-width: 1200px) {
    .product-thumb {width: 220px; //you want width i think this is best with percentage }
}

如果屏幕宽度<= 1080，如何更改产品图像的宽度？

1 个答案: