본문으로 건너뛰기

Media Query Basics

Media Query Basics

Visitors come to your website using devices with various screen sizes such as smartphones, tablets, and PCs.

Media Queries are a tool to present the best layout and design for web pages, tailored to different devices and screen sizes.


Basic Syntax

Media Queries begin with @media followed by the condition. The styles within the curly braces { } are applied when the condition is met.


Example:

CSS
/* Style when screen size is less than 600px */
@media screen and (max-width: 600px) {
body {
background-color: lightblue; /* Set background color to lightblue */
}
}

Here, the background color of the body is set to lightblue when the screen size is less than 600px.