2.1 Cơ bản về Media Queries
Media queries là một trong những công cụ quan trọng nhất để tạo ra các trang web responsive. Với chúng, bạn có thể điều chỉnh styles cho các thiết bị và kích thước màn hình khác nhau, đảm bảo hiển thị tối ưu và sự tiện dụng. Dưới đây chúng ta sẽ xem qua cơ bản cách sử dụng media queries, cú pháp của chúng, cũng như các ví dụ về việc điều chỉnh styles cho các màn hình khác nhau.
Media queries sử dụng quy tắc @media, cho phép áp dụng các styles nhất định chỉ khi đáp ứng
các điều kiện đã đặt ra. Các điều kiện có thể bao gồm kích thước màn hình, độ phân giải, hướng và các tham số khác.
Cú pháp:
@media media-type and (media-feature) {
/* styles */
}
Ở đâu:
media-type: loại media mà styles sẽ được áp dụng. Thường sử dụng screenmedia-feature: đặc điểm của media, như độ rộng, độ cao, hướng, v.v.
Ví dụ:
- Trong ví dụ này, nền của trang sẽ trở thành màu xanh nhạt nếu chiều rộng màn hình không quá 768 pixel.
@media screen and (max-width: 768px) {
body {
background-color: lightblue;
}
}
2.2 Các loại Media Queries
1. Queries theo chiều rộng và chiều cao
Những media queries này cho phép thay đổi styles dựa trên chiều rộng và chiều cao của cửa sổ xem.
Ví dụ:
/* Áp dụng styles nếu chiều rộng màn hình nhỏ hơn hoặc bằng 768px */
@media (max-width: 768px) {
.container {
padding: 10px;
}
}
/* Áp dụng styles nếu chiều cao màn hình lớn hơn 800px */
@media (min-height: 800px) {
.header {
height: 150px;
}
}
2. Hướng (orientation)
Queries theo hướng màn hình cho phép điều chỉnh styles dựa trên việc thiết bị ở chế độ dọc (portrait) hay ngang (landscape).
Ví dụ:
/* Áp dụng styles cho hướng dọc */
@media (orientation: portrait) {
.sidebar {
display: none;
}
}
/* Áp dụng styles cho hướng ngang */
@media (orientation: landscape) {
.sidebar {
display: block;
}
}
3. Độ phân giải (resolution)
Media queries theo độ phân giải cho phép điều chỉnh styles cho các thiết bị có độ phân giải khác nhau, như màn hình Retina.
Ví dụ:
/* Áp dụng styles cho màn hình có độ phân giải 2x trở lên */
@media (min-resolution: 2dppx) {
.high-res-image {
background-image: url('high-res-image.png');
}
}
/* Áp dụng styles cho màn hình có độ phân giải dưới 2x */
@media (max-resolution: 1.99dppx) {
.high-res-image {
background-image: url('standard-res-image.png');
}
}
2.3 Kết hợp Media Queries
Media queries có thể được kết hợp với các toán tử logic and, not và only.
Ví dụ
Sử dụng toán tử and:
/* Áp dụng styles cho các thiết bị có chiều rộng màn hình từ 600px đến 1200px */
@media (min-width: 600px) and (max-width: 1200px) {
.main-content {
margin: 0 auto;
width: 80%;
}
}
Sử dụng toán tử not:
/* Áp dụng styles cho tất cả các thiết bị, ngoại trừ những thiết bị có chiều rộng màn hình dưới 600px */
@media not all and (max-width: 600px) {
.footer {
display: block;
}
}
Sử dụng toán tử only:
/* Áp dụng styles chỉ cho màn hình */
@media only screen and (max-width: 768px) {
.menu {
display: none;
}
}
GO TO FULL VERSION