Web development
Media Queries
Updated Oct 28, 2026
Media queries apply CSS when conditions such as viewport width match. Write a usable base layout, then add breakpoints where the content needs a change. Choose breakpoints by testing the design, not b
What you’ll learn
Understand and practise media queries.
Explanation
Media queries apply CSS when conditions such as viewport width match. Write a usable base layout, then add breakpoints where the content needs a change. Choose breakpoints by testing the design, not by relying only on device names.
Media query អនុវត្ត CSS នៅពេលលក្ខខណ្ឌដូចជាទទឹងអេក្រង់ត្រូវគ្នា។ ចាប់ផ្ដើមពីប្លង់មូលដ្ឋាន ហើយបន្ថែម breakpoint តាមតម្រូវការមាតិកា។
Example
@media (min-width: 48rem) { .cards { display: grid; grid-template-columns: 1fr 1fr; } }
Practice
What happens when the minimum width condition is met?
Answer and explanation
Show answer / បង្ហាញចម្លើយ
The declarations inside that media query can apply.
Quick recap
Media queries apply CSS when conditions such as viewport width match.