Media query CSS code for a web page

media-query-template

@media only screen
and (max-width : 1024px) { }

@media only screen
and (min-width : 769px)
and (max-width : 1024px) { }

@media only screen
and (max-width : 768px) { }

@media only screen
and (min-width : 481px)
and (max-width : 768px) { }

@media only screen
and (max-width : 480px) { }

@media only screen
and (min-width : 321px)
and (max-width : 480px) { }

@media only screen
and (max-width : 320px) { }

<!-- It’s important to remember that max-width and min-width include the pixel referenced. For example, min-width: 768px includes the 768px position, the same occurs with max-width: 768px. It’s used twice and we have less control. On these cases, it’s better to add one pixel more to the min-width; for example, min-width: 769px.

Scheme:
= 769, <= 1024
= 481, <= 768
= 321, <= 480
<= 320
 -->