Media queries
In each responsive web project, you will need to create media queries. You need to choose steps that you will implement and then start creating the project based on these steps.
Media queries template
Media queries are rather simple to use and create. The main problem with media queries is reusable steps that you can keep in one place. In some projects, you will need to add a few more queries because of project visibility problems or some extra code that will affect your code. Let's focus on how to make it once with some settings and then use it in our code.
The basic settings are focused on the following:
Mobile devices (phones)
Mobile devices (tablets)
Desktop devices
Desktop devices (large)
In some cases, you can extend this list with mobile device position (portrait and landscape), but a smaller number of media queries is better and easier for maintenance. So how can we keep the sizes?
$small
: 320px$medium
: 768px$large
: 1024px