h1 {
    text-align:center;
    background-color:black;
    padding:1%;
    color:white;
}

.content{

text-align: center;
}

.product {
    

    max-width:21%;
    
    border:1px solid grey;
    padding:0 0.5%;
    margin: 0.5%;
    display: inline-block;
    /*float:left;  /*关键是这一行代码，使得该代码能够在不同的设备上自适应的显示*/
}
img{

    width:100%;
    height: auto;
}

@media screen and (max-width: 900px) {
    .product {
        max-width: 30%;
    }
}
@media screen and (max-width: 600px) {
    .product {
        max-width: 40%;
    }
}
@media screen and (max-width: 450px) {
    .product {
        max-width: 100%;
    }
}