电子商务网站项目未在响应式 tablet/mobile 视图中正确显示
Ecommerce site items not shown properly in responsive tablet/mobile view
我在一个小型电子商务网站上工作。
这是网络浏览器上的视图：
它并不完美，但足以满足我的需求。
问题出在使用较小的设备浏览网页时。
这是将浏览器宽度减小到平板电脑尺寸的视图：
正在合并项目。
这是网站的代码：
<?php
//index.php
?>
<!DOCTYPE html>
<html>
<head>
<title>Sdocks</title>
<script src="js/jquery.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<script src="js/bootstrap.min.js"></script>
<style>
.popover
{
width: 100%;
max-width: 800px;
}
</style>
</head>
<body>
<div class="container">
<br />
<h3 align="center"><a href="#">Sdocks</a></h3>
<br />
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Menu</span>
<span class="glyphicon glyphicon-menu-hamburger"></span>
</button>
<a class="navbar-brand" href="/">Cart</a>
</div>
<div id="navbar-cart" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
<a id="cart-popover" class="btn" data-placement="bottom" title="Shopping Cart">
<span class="glyphicon glyphicon-shopping-cart"></span>
<span class="badge"></span>
<span class="total_price">$ 0.00</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
<div id="popover_content_wrapper" style="display: none">
<span id="cart_details"></span>
<div align="right">
<a href="#" class="btn btn-primary" id="check_out_cart">
<span class="glyphicon glyphicon-shopping-cart"></span> Check out
</a>
<a href="#" class="btn btn-default" id="clear_cart">
<span class="glyphicon glyphicon-trash"></span> Clear
</a>
</div>
</div>
<div id="display_item">
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
load_product();
load_cart_data();
function load_product()
{
$.ajax({
url:"fetch_item.php",
method:"POST",
success:function(data)
{
$('#display_item').html(data);
}
});
}
function load_cart_data()
{
$.ajax({
url:"fetch_cart.php",
method:"POST",
dataType:"json",
success:function(data)
{
$('#cart_details').html(data.cart_details);
$('.total_price').text(data.total_price);
$('.badge').text(data.total_item);
}
});
}
$('#cart-popover').popover({
html : true,
container: 'body',
content:function(){
return $('#popover_content_wrapper').html();
}
});
$(document).on('click', '.add_to_cart', function(){
var product_id = $(this).attr("id");
var product_name = $('#name'+product_id+'').val();
var product_price = $('#price'+product_id+'').val();
var product_quantity = $('#quantity'+product_id).val();
var action = "add";
if(product_quantity > 0)
{
$.ajax({
url:"action.php",
method:"POST",
data:{product_id:product_id, product_name:product_name, product_price:product_price, product_quantity:product_quantity, action:action},
success:function(data)
{
load_cart_data();
alert("Item has been Added into Cart");
}
});
}
else
{
alert("lease Enter Number of Quantity");
}
});
$(document).on('click', '.delete', function(){
var product_id = $(this).attr("id");
var action = 'remove';
if(confirm("Are you sure you want to remove this product?"))
{
$.ajax({
url:"action.php",
method:"POST",
data:{product_id:product_id, action:action},
success:function()
{
load_cart_data();
$('#cart-popover').popover('hide');
alert("Item has been removed from Cart");
}
})
}
else
{
return false;
}
});
$(document).on('click', '#clear_cart', function(){
var action = 'empty';
$.ajax({
url:"action.php",
method:"POST",
data:{action:action},
success:function()
{
load_cart_data();
$('#cart-popover').popover('hide');
alert("Your Cart has been clear");
}
});
});
});
</script>
这是创建每个项目视图布局的 php 文件：
<?php
//fetch_item.php
include('database_connection.php');
$query = "SELECT * FROM tbl_product ORDER BY id DESC";
$statement = $connect->prepare($query);
if($statement->execute())
{
$result = $statement->fetchAll();
$output = '';
foreach($result as $row)
{
$output .= '
<div class="col-md-3" style="margin-top:12px;">
<div style="border:1px solid #333; background-color:#f1f1f1; border-radius:5px; padding:16px; height:350px;" align="center">
<img src="../administrar/application/admin/productos/'.$row["image"].'" class="img-responsive" /><br />
<h4 class="text-info">'.$row["name"].'</h4>
<h4 class="text-danger">$ '.$row["price"] .'</h4>
<input type="text" name="quantity" id="quantity' . $row["id"] .'" class="form-control" value="1" />
<input type="hidden" name="hidden_name" id="name'.$row["id"].'" value="'.$row["name"].'" />
<input type="hidden" name="hidden_price" id="price'.$row["id"].'" value="'.$row["price"].'" />
<input type="button" name="add_to_cart" id="'.$row["id"].'" style="margin-top:5px;" class="btn btn-success form-control add_to_cart" value="Add to Cart" />
</div>
</div>
';
}
echo $output;
}
?>
为了在 tablet/mobile UI 中获得更好的项目布局，应该更改代码中的哪些内容？
这是因为产品项目容器有 css 属性 个 height: 350px，但 img 未正确调整大小。
我建议您的图片保持相同的大小，但如果不能，您可以使用 object-fit: cover 来解决问题。
.item-content {
border: 1px solid #333;
background-color: #f1f1f1;
border-radius: 5px;
padding: 16px;
height: 350px;
}
.img-container>img {
width: 100%;
max-height: 150px;
object-fit: cover;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="row">
<div class="col-md-3" style="margin-top:12px;">
<div class="item-content" align="center">
<div class="img-container">
<img src="https://via.placeholder.com/640x480.png?text=640x480" />
</div>
<h4 class="text-info">Awesome Product 1</h4>
<h4 class="text-danger">$ 12.00</h4>
<input type="text" name="quantity" id="quantity_1" class="form-control" value="1" />
<input type="hidden" name="hidden_name" id="name_1" value="" />
<input type="hidden" name="hidden_price" id="price_1" value="" />
<input type="button" name="add_to_cart" id="1" style="margin-top:5px;" class="btn btn-success form-control add_to_cart" value="Add to Cart" />
</div>
</div>
<div class="col-md-3" style="margin-top:12px;">
<div class="item-content" align="center">
<div class="img-container">
<img src="https://via.placeholder.com/320x640.png?text=320x640" />
</div>
<h4 class="text-info">Awesome Product 2</h4>
<h4 class="text-danger">$ 15.00</h4>
<input type="text" name="quantity" id="quantity_2" class="form-control" value="1" />
<input type="hidden" name="hidden_name" id="name_2" value="" />
<input type="hidden" name="hidden_price" id="price_2" value="" />
<input type="button" name="add_to_cart" id="2" style="margin-top:5px;" class="btn btn-success form-control add_to_cart" value="Add to Cart" />
</div>
</div>
<div class="col-md-3" style="margin-top:12px;">
<div class="item-content" align="center">
<div class="img-container">
<img src="https://via.placeholder.com/100x100.png?text=100x100" />
</div>
<h4 class="text-info">Awesome Product 3</h4>
<h4 class="text-danger">$ 2.00</h4>
<input type="text" name="quantity" id="quantity_3" class="form-control" value="1" />
<input type="hidden" name="hidden_name" id="name_3" value="" />
<input type="hidden" name="hidden_price" id="price_3" value="" />
<input type="button" name="add_to_cart" id="3" style="margin-top:5px;" class="btn btn-success form-control add_to_cart" value="Add to Cart" />
</div>
</div>
<div class="col-md-3" style="margin-top:12px;">
<div class="item-content" align="center">
<div class="img-container">
<img src="https://via.placeholder.com/300x1000.png?text=300x1000" />
</div>
<h4 class="text-info">Awesome Product 4</h4>
<h4 class="text-danger">$ 15.00</h4>
<input type="text" name="quantity" id="quantity_4" class="form-control" value="1" />
<input type="hidden" name="hidden_name" id="name_4" value="" />
<input type="hidden" name="hidden_price" id="price_4" value="" />
<input type="button" name="add_to_cart" id="4" style="margin-top:5px;" class="btn btn-success form-control add_to_cart" value="Add to Cart" />
</div>
</div>
</div>
我在一个小型电子商务网站上工作。
这是网络浏览器上的视图：
它并不完美，但足以满足我的需求。
问题出在使用较小的设备浏览网页时。 这是将浏览器宽度减小到平板电脑尺寸的视图：
正在合并项目。
这是网站的代码：
<?php
//index.php
?>
<!DOCTYPE html>
<html>
<head>
<title>Sdocks</title>
<script src="js/jquery.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<script src="js/bootstrap.min.js"></script>
<style>
.popover
{
width: 100%;
max-width: 800px;
}
</style>
</head>
<body>
<div class="container">
<br />
<h3 align="center"><a href="#">Sdocks</a></h3>
<br />
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Menu</span>
<span class="glyphicon glyphicon-menu-hamburger"></span>
</button>
<a class="navbar-brand" href="/">Cart</a>
</div>
<div id="navbar-cart" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
<a id="cart-popover" class="btn" data-placement="bottom" title="Shopping Cart">
<span class="glyphicon glyphicon-shopping-cart"></span>
<span class="badge"></span>
<span class="total_price">$ 0.00</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
<div id="popover_content_wrapper" style="display: none">
<span id="cart_details"></span>
<div align="right">
<a href="#" class="btn btn-primary" id="check_out_cart">
<span class="glyphicon glyphicon-shopping-cart"></span> Check out
</a>
<a href="#" class="btn btn-default" id="clear_cart">
<span class="glyphicon glyphicon-trash"></span> Clear
</a>
</div>
</div>
<div id="display_item">
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
load_product();
load_cart_data();
function load_product()
{
$.ajax({
url:"fetch_item.php",
method:"POST",
success:function(data)
{
$('#display_item').html(data);
}
});
}
function load_cart_data()
{
$.ajax({
url:"fetch_cart.php",
method:"POST",
dataType:"json",
success:function(data)
{
$('#cart_details').html(data.cart_details);
$('.total_price').text(data.total_price);
$('.badge').text(data.total_item);
}
});
}
$('#cart-popover').popover({
html : true,
container: 'body',
content:function(){
return $('#popover_content_wrapper').html();
}
});
$(document).on('click', '.add_to_cart', function(){
var product_id = $(this).attr("id");
var product_name = $('#name'+product_id+'').val();
var product_price = $('#price'+product_id+'').val();
var product_quantity = $('#quantity'+product_id).val();
var action = "add";
if(product_quantity > 0)
{
$.ajax({
url:"action.php",
method:"POST",
data:{product_id:product_id, product_name:product_name, product_price:product_price, product_quantity:product_quantity, action:action},
success:function(data)
{
load_cart_data();
alert("Item has been Added into Cart");
}
});
}
else
{
alert("lease Enter Number of Quantity");
}
});
$(document).on('click', '.delete', function(){
var product_id = $(this).attr("id");
var action = 'remove';
if(confirm("Are you sure you want to remove this product?"))
{
$.ajax({
url:"action.php",
method:"POST",
data:{product_id:product_id, action:action},
success:function()
{
load_cart_data();
$('#cart-popover').popover('hide');
alert("Item has been removed from Cart");
}
})
}
else
{
return false;
}
});
$(document).on('click', '#clear_cart', function(){
var action = 'empty';
$.ajax({
url:"action.php",
method:"POST",
data:{action:action},
success:function()
{
load_cart_data();
$('#cart-popover').popover('hide');
alert("Your Cart has been clear");
}
});
});
});
</script>
这是创建每个项目视图布局的 php 文件：
<?php
//fetch_item.php
include('database_connection.php');
$query = "SELECT * FROM tbl_product ORDER BY id DESC";
$statement = $connect->prepare($query);
if($statement->execute())
{
$result = $statement->fetchAll();
$output = '';
foreach($result as $row)
{
$output .= '
<div class="col-md-3" style="margin-top:12px;">
<div style="border:1px solid #333; background-color:#f1f1f1; border-radius:5px; padding:16px; height:350px;" align="center">
<img src="../administrar/application/admin/productos/'.$row["image"].'" class="img-responsive" /><br />
<h4 class="text-info">'.$row["name"].'</h4>
<h4 class="text-danger">$ '.$row["price"] .'</h4>
<input type="text" name="quantity" id="quantity' . $row["id"] .'" class="form-control" value="1" />
<input type="hidden" name="hidden_name" id="name'.$row["id"].'" value="'.$row["name"].'" />
<input type="hidden" name="hidden_price" id="price'.$row["id"].'" value="'.$row["price"].'" />
<input type="button" name="add_to_cart" id="'.$row["id"].'" style="margin-top:5px;" class="btn btn-success form-control add_to_cart" value="Add to Cart" />
</div>
</div>
';
}
echo $output;
}
?>
为了在 tablet/mobile UI 中获得更好的项目布局，应该更改代码中的哪些内容？
这是因为产品项目容器有 css 属性 个 height: 350px，但 img 未正确调整大小。
我建议您的图片保持相同的大小，但如果不能，您可以使用 object-fit: cover 来解决问题。
.item-content {
border: 1px solid #333;
background-color: #f1f1f1;
border-radius: 5px;
padding: 16px;
height: 350px;
}
.img-container>img {
width: 100%;
max-height: 150px;
object-fit: cover;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="row">
<div class="col-md-3" style="margin-top:12px;">
<div class="item-content" align="center">
<div class="img-container">
<img src="https://via.placeholder.com/640x480.png?text=640x480" />
</div>
<h4 class="text-info">Awesome Product 1</h4>
<h4 class="text-danger">$ 12.00</h4>
<input type="text" name="quantity" id="quantity_1" class="form-control" value="1" />
<input type="hidden" name="hidden_name" id="name_1" value="" />
<input type="hidden" name="hidden_price" id="price_1" value="" />
<input type="button" name="add_to_cart" id="1" style="margin-top:5px;" class="btn btn-success form-control add_to_cart" value="Add to Cart" />
</div>
</div>
<div class="col-md-3" style="margin-top:12px;">
<div class="item-content" align="center">
<div class="img-container">
<img src="https://via.placeholder.com/320x640.png?text=320x640" />
</div>
<h4 class="text-info">Awesome Product 2</h4>
<h4 class="text-danger">$ 15.00</h4>
<input type="text" name="quantity" id="quantity_2" class="form-control" value="1" />
<input type="hidden" name="hidden_name" id="name_2" value="" />
<input type="hidden" name="hidden_price" id="price_2" value="" />
<input type="button" name="add_to_cart" id="2" style="margin-top:5px;" class="btn btn-success form-control add_to_cart" value="Add to Cart" />
</div>
</div>
<div class="col-md-3" style="margin-top:12px;">
<div class="item-content" align="center">
<div class="img-container">
<img src="https://via.placeholder.com/100x100.png?text=100x100" />
</div>
<h4 class="text-info">Awesome Product 3</h4>
<h4 class="text-danger">$ 2.00</h4>
<input type="text" name="quantity" id="quantity_3" class="form-control" value="1" />
<input type="hidden" name="hidden_name" id="name_3" value="" />
<input type="hidden" name="hidden_price" id="price_3" value="" />
<input type="button" name="add_to_cart" id="3" style="margin-top:5px;" class="btn btn-success form-control add_to_cart" value="Add to Cart" />
</div>
</div>
<div class="col-md-3" style="margin-top:12px;">
<div class="item-content" align="center">
<div class="img-container">
<img src="https://via.placeholder.com/300x1000.png?text=300x1000" />
</div>
<h4 class="text-info">Awesome Product 4</h4>
<h4 class="text-danger">$ 15.00</h4>
<input type="text" name="quantity" id="quantity_4" class="form-control" value="1" />
<input type="hidden" name="hidden_name" id="name_4" value="" />
<input type="hidden" name="hidden_price" id="price_4" value="" />
<input type="button" name="add_to_cart" id="4" style="margin-top:5px;" class="btn btn-success form-control add_to_cart" value="Add to Cart" />
</div>
</div>
</div>