RWD Media queries are used to target designs for many standard and popular devices such as tablet, mobile devices and desktop. @media rule is used to include a block of CSS properties only if a certain condition is true.
@media only screen and (max-width: 500px) {
body {
background-color: lightgreen;
}
RWD Media Queries-Breakpoint
Breakpoints are points where the website content responds according to the device width, allowing you to show the best possible layout to the user. CSS breakpoints are also called media query breakpoints, as they are used with media query.
Breakpoint based on content
breakpoints is based on the content of your site. This method allows you to simply add breakpoints where your content needs layout adjustment.
Min and max width
If you are designing your layout with a mobile-first approach, then use min-width breakpoints and work your way up. if you are designing for larger devices first, then set your default CSS as you normally would and adjust for smaller devices with the max-width approach.