본문으로 건너뛰기

Media Queries Practice

Media Queries Practice

Websites are visited on devices with various sizes and resolutions. To accommodate different devices, web designers and developers use 'responsive web design' to ensure web pages look appropriate on various devices.

The core concepts of responsive web design are media query and breakpoint.


Reviewing Media Queries

Media query allows applying different style rules based on specific conditions (e.g., the width of the browser window). This enables adjusting the layout, image sizes, and other styles of web pages according to screen size or device type.


Reviewing Breakpoints

Breakpoint refers to the point used to change the layout or design at certain screen sizes or resolutions. It is a reference point for applying differently designed styles according to the screen size of the device.


CSS Code Analysis:

The CSS of this template uses two breakpoints to apply styles.

  1. Tablet:
CSS
@media (max-width: 1100px) {
...;
}

This media query defines styles that apply when the browser window's width is 1100px or less. Here, 1100px is used as a breakpoint for the width of tablet devices.

  1. Mobile:
CSS
@media (max-width: 767px) {
...;
}

This media query defines styles that apply when the browser window's width is 767px or less. 767px is used as a breakpoint for the width of mobile devices.