- viewport meta tag:
- Mobile browsers render pages in a virtual "window" (the viewport), usually wider than the screen, so they don't need to squeeze every page layout into a tiny window (which would break many non-mobile-optimized sites). Users can pan and zoom to see different areas of the page.
- The "viewport meta tag" to let web developers control the viewport's size and scale.
- <meta name="viewport" content="width=device-width, initial-scale=1">
- The main ingredient includes a Media Query in your style sheet
- This will create a "breakpoint" when the browser size reaches a certain condition
- @media only...
- Ex:
@media only screen and (max-width: 481px)
{ ... }
- Translates that any style within the curly brackets will apply under 481px
- @media (min-width: 481px) and (max-width: 1200px) { ... }
- Translates that any style within the curly brackets will apply between 800px and 1200px
- @media only screen and (min-width: 481px)
- Translates that any style within the curly brackets will apply over 481px
- Why would we use min-width instead of max-width?