How to write @media query for all devices

What is a @media query?

The CSS 3 includes a feature called media queries, which allows content to adapt to changing situations like screen resolution layout and media query is a cornerstone technology of responsive web design.
Responsive web design @media queries of list- we have created both min width and max width for web design responsive in the browser, you can use the following:

Perfect @media query for responsive web design layout

you can write any type wordpress website in media query for website responsive view all screen resolution layout in the browser, The below a complete @media query copy and paste in your style.css file.

@media (max-width:479px) and (min-width:240px){
//write here your css for moible/phone view
}
@media (min-width:480px) and (max-width:767px) {
//write here your css for moible rotate/landscape view
}
@media (min-width:768px) and (max-width:999px) {
//write here your css for iPad view
}
@media (min-width:1000px) and (max-width:1100px) {
//write here your css for iPad rotate view
}
@media (min-width:1440px) and (max-width:1679px) {
//write here your css for above 1366px screen view
}
@media (min-width:1680px) and (max-width:1919px) {
//write here your css for above 1680px screen view
}
@media (min-width:1920px) and (max-width:2300px) {
//write here your css for above 1920px screen view
}
@media (min-width:2301px) and (max-width:3200px) {
//write here your css for above 2301px to 3200px screen view
}