Demo danh sách sản phẩm có responsive

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            box-sizing: border-box;
        }
        
        .list-product {}
        
        .item-product {
            float: left;
            width: 200px;
            height: 250px;
            margin: 0px;
            padding: 10px;
            overflow: hidden;
        }
        
        .item-product .content {
            background-color: aqua;
            width: 200px;
            height: 250px;
        }
        
        @media only screen and (max-width: 480px) {
            .item-product {
                width: 50%;
                margin: 0px;
            }
        }
        /*2. Thiết bị máy tính bảng hoặc màn hình điện thoại xoay ngang: Màn hình to hơn 480px, trường hợp này sẽ bao gồm tất cả các màn hình to hơn 480px, kể cả tivi, nhưng khi xuống đến dòng code bên dưới thì đã bị lọc bởi giới hạn 768px nên trong khu vực này chỉ có các loại màn hình từ 480px đến 768px là có tác dụng, vượt quá 768 sẽ rơi vào tình huống số 3 có tác dụng*/
        
        @media only screen and (min-width: 480px) {
            .demo {
                background: green;
            }
        }
        /* 3. Máy tính bảng xoay ngang hoặc màn hình máy tính bàn (loại màn vuông) giới hạn chiều rộng từ 768 đến 1000px */
        
        @media only screen and (min-width: 768px) {
            .demo {
                background: blue;
            }
        }
        /* 4. Màn hình Laptop từ 1000 đến 1200px*/
        
        @media only screen and (min-width: 1000px) {
            .demo {
                background: orange;
            }
        }
        /* 5. Phần này to hơn màn hình laptop: vd loại màn 21inch trở lên, màn tivi...., nhỏ nhất là 1200*/
        
        @media only screen and (min-width: 1200px) {
            .demo {
                background: gray;
            }
        }
    </style>

</head>

<body>

    <div class="list-product">
        <div class="item-product">
            <div class="content">
                nội dung viết trong này
            </div>
        </div>

        <div class="item-product">
            <div class="content">
                nội dung viết trong này
            </div>
        </div>

        <div class="item-product">
            <div class="content">
                nội dung viết trong này
            </div>
        </div>

        <div class="item-product">
            <div class="content">
                nội dung viết trong này
            </div>
        </div>

        <div class="item-product">
            <div class="content">
                nội dung viết trong này
            </div>
        </div>
    </div>




</body>

</html>
Demo danh sách sản phẩm có responsive Run
