Responsive Design with Media Queries simple tutorial

Introduction to Media Queries

What are Media Queries?

Responsive Design & Media Queries are a feature of CSS that allows the application of different styles based on the properties of the user’s device, such as screen width, height, orientation, and resolution.

Media queries are most commonly used to make websites responsive, adjusting layout and design elements based on the viewport size.

• Media queries can target specific breakpoints (e.g., mobile, tablet, desktop).
• Min-width applies the styles to screen sizes greater than or equal to the specified width.
• Max-width applies the styles to screen sizes less than or equal to the specified width.

Common Breakpoints:

1. Mobile (small devices):
   • Typically used for devices with a screen width of up to 600px.
   • Example

2. Tablet (medium devices):

• Target screens with a width between 600px and 900px.
• Example

3. Desktop (large devices):

• Generally for screens wider than 900px.
• Example

Learn Next Tutorial