Media Queries for All Devices and Screen Sizes

Responsive websites are no longer a luxury but requirement. In this vew to reliably determine the user's device capabilities is of paramount importance.

The best way to complete this task is through media queries, which will get executed depending on the size of the user screen.

/* Extra small devices (small portrait phones, up to 320px) */
@media only screen and (min-width : 0px) and (max-width : 320px) { }

/* Small devices (portrait phones, 320px to 576px) */
@media only screen and (min-width : 320px) and (max-width : 576px) { }

/* Small devices (landscape phones, 576px to 768px) */
@media only screen and (min-width : 320px) and (max-width : 576px) { }
    
/* Medium devices (portrait tablets, 576px to 768px) */
@media and (min-width : 576px) and (max-width: 768px) { }

/* Medium devices (landscape tablets, 768px to 992px) */
@media and (min-width : 768px) and (max-width: 992px) { } 
    
/* Large devices (small desktops, 992px to 1200px) */
@media (min-width: 992px) and (max-width: 1200px) { }
    
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { }