Pitfalls of css3 responsive layout

When doing responsive layout, I was not very proficient in floating layout, so I used the latest flexible box layout and grid layout of CSS3 to do it. I encountered some pitfalls when doing responsive layout.

Previous code:

@media (max-width:570px) {
    
    
}
@media (max-width:992px) {

    
}

Let me explain here, when writing css, it is best to make the response range clear. If you only fill in a maximum value or a minimum value, the code may be overwritten.

Modified code:

@media (max-width:570px) {
    
    
}
@media (max-width:992px) and (min-width:570px){

    
}

I'm very good, I'm very good::(insidious)