Sử dụng Media Query để thay đổi layout khi màn hình nhỏ hơn ngưỡng nhất định (breakpoint).
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.sample {
width: 50%;
background-color: lightblue;
height: 200px;
font-size: 18px;
padding: 20px;
box-sizing: border-box;
}
@media only screen and (max-width: 700px) {
body {
margin: 0;
padding: 0;
}
.sample {
width: 100%;
}
}
</style>
</head>
<body>
<h1>Thay Đổi Chiều Rộng Cột Theo Kích Thước Màn Hình</h1>
<div class="sample">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quod, maiores!</div>
<h3>Thu nhỏ cửa sổ trình duyệt xuống 700px để thấy div mở rộng thành 100%</h3>
</body>
</html>
Kết quả
- Màn hình > 700px: div chiếm 50% chiều rộng, nền xanh nhạt
- Màn hình ≤ 700px: div mở rộng 100%, body bỏ margin/padding
Breakpoints phổ biến
/* Mobile first */
@media (min-width: 576px) { ... } /* Small */
@media (min-width: 768px) { ... } /* Medium */
@media (min-width: 992px) { ... } /* Large */
@media (min-width: 1200px) { ... } /* XL */