Using a Media Query in CSS
the code below contains a CSS media query, and it goes at the bottom of your CSS file:
@media only screen and (max-width:480px) {
/* do something to the design for small screens */
}
The job of a media query is to detect the screen or window size of the device a user is using to view your site or application. In the preceding example we are detecting for a maximum screen size of 480px; then inside the brackets, we are able to adjust the design (in the presentation layer) to better fit the smaller screen size.
It's device-independent, so we can activate these media queries by resizing your browser window to 480px
Note
If you loaded the example to this point up on a phone, you would notice that your media query isn’t working yet. The Web page probably looks all zoomed out, and this obviously isn’t what we’re looking for. There is an HTML meta element that you need to add into the <head> of your document to make sure this initial zoom happens and your media queries work as expected. That element looks like: <meta name="viewport" content="width=device-width, initial-scale=1">
