Media Queries, Responsive Design, Mobile-First
In this lesson, we will look at the anatomy of a media query so we create different designs for different mobile devices.
When designing a website, our job is to determine the layout of our rectangles based on the width of the viewport. Media queries influence how the HTML content is styled in print, on-screen, on different devices, and screen sizes. In this chapter, we will only deal with formatting media on-screen, responding to different screen sizes.
Creating breakpoints
Let’s create a container with 100% width for less than 768px viewport width. As soon as the viewport width is 768px or more, add a 10% margin on the left and right-hand side of the container.
If you know how to create breakpoints, solve the following exercise on your own.
To test your solution, try it both in a narrow and in a wide browser window. As soon as the body of the page reaches a width of
768pxa10%left and rightmarginshould be added to the light blue container.
CSS inside the media query overrides the CSS outside the media query.
Using min-width and max-width
Technically, it is possible to create both min-width and max-width media query declarations:
We advise using min-width only. However, be ready to ...