CSS RWD - Truy vấn Media
Chào mừng các bạn đang học lập trình web! Hôm nay, chúng ta sẽ cùng lặn sâu vào thế giới thú vị của Thiết kế Web Phản hồi (Responsive Web Design - RWD) và tập trung vào một trong những công cụ mạnh mẽ nhất của nó: Truy vấn Media. Hãy tưởng tượng bạn đang tạo một bức tranh đẹp, nhưng nó cần phải trông tuyệt vời trên cả một tấm thiệp nhỏ và một bảng quảng cáo khổng lồ. Đó chính xác là điều chúng ta đang làm với các trang web, và truy vấn media chính là cọ phép thuật của chúng ta!
Truy vấn Media là gì?
Truy vấn Media giống như những con kỳ nhông trong thế giới CSS. Chúng cho phép trang web của bạn thích ứng và thay đổi diện mạo dựa trên thiết bị mà nó được xem. Dù là điện thoại di động, máy tính bảng hay máy tính để bàn, truy vấn media giúp đảm bảo rằng trang web của bạn trông tuyệt vời ở mọi nơi.
Hãy bắt đầu với một ví dụ cơ bản:
@media screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}Trong đoạn mã này, chúng ta đang nói, "Hey browser, nếu chiều rộng màn hình là 600 pixel hoặc ít hơn, hãy sơn nền màu xanh nhạt!" Đó như thể cho trang web của bạn một diện mạo tươi mới trên màn hình nhỏ hơn.
CSS RWD Truy vấn Media - Thuộc tính width
Thuộc tính width là người bạn tốt nhất của chúng ta khi tạo các thiết kế phản hồi. Nó cho phép chúng ta đặt các phong cách khác nhau dựa trên chiều rộng của màn hình thiết bị.
Hãy xem một ví dụ toàn diện hơn:
/* Phong cách mặc định cho màn hình lớn hơn */
.container {
width: 80%;
margin: 0 auto;
}
/* Phong cách cho màn hình 768px hoặc nhỏ hơn */
@media screen and (max-width: 768px) {
.container {
width: 95%;
}
}
/* Phong cách cho màn hình 480px hoặc nhỏ hơn */
@media screen and (max-width: 480px) {
.container {
width: 100%;
}
}Đây là những gì đang xảy ra:
- Theo mặc định, container rộng 80% với một chút margin hai bên.
- Khi màn hình thu nhỏ đến 768px hoặc ít hơn, chúng ta tăng宽度 lên 95%.
- Trên màn hình rất nhỏ (480px hoặc ít hơn), chúng ta làm container rộng toàn bộ.
Đó như thể trang web của bạn đang làm yoga, co giãn để phù hợp với bất kỳ màn hình nào!
CSS RWD Truy vấn Media - Nhiều Điểm Đột Phá
Bây giờ, hãy nói về các điểm đột phá. Đây là những điểm mà giao diện của trang web sẽ thay đổi để cung cấp trải nghiệm người dùng tốt nhất. Hãy nghĩ về chúng như là "điểm đột phá" mà thiết kế của bạn cần phải thích ứng.
Dưới đây là một ví dụ sử dụng nhiều điểm đột phá:
/* Phong cách cơ bản */
body {
font-size: 16px;
}
/* Màn hình lớn */
@media screen and (min-width: 1200px) {
body {
font-size: 18px;
}
}
/* Màn hình trung bình */
@media screen and (min-width: 992px) and (max-width: 1199px) {
body {
font-size: 17px;
}
}
/* Màn hình nhỏ */
@media screen and (max-width: 991px) {
body {
font-size: 15px;
}
}Trong ví dụ này, chúng ta đang điều chỉnh kích thước chữ dựa trên kích thước màn hình khác nhau:
- Trên màn hình lớn (1200px và trên), chúng ta tăng kích thước chữ lên 18px.
- Trên màn hình trung bình (giữa 992px và 1199px), chúng ta sử dụng kích thước chữ 17px.
- Trên màn hình nhỏ (991px và dưới), chúng ta giảm kích thước chữ xuống 15px.
Đó như thể bạn có một tủ quần áo phản hồi luôn vừa vặn, không matter bạn đã ăn nhiều hay ít!
CSS RWD Truy vấn Media - Sử dụngOrientation
Bạn có biết trang web của bạn có thể nhận biết nếu một thiết bị được giữ theo phương đứng hay nằm ngang? Đúng vậy, và chúng ta có thể sử dụng thông tin này để tạo ra các thiết kế tùy chỉnh hơn.
Dưới đây là cách chúng ta có thể sử dụng tính năng orientation:
/* Phong cách cho phương đứng */
@media screen and (orientation: portrait) {
.sidebar {
width: 100%;
float: none;
}
.main-content {
margin-left: 0;
}
}
/* Phong cách cho phương nằm ngang */
@media screen and (orientation: landscape) {
.sidebar {
width: 25%;
float: left;
}
.main-content {
margin-left: 26%;
}
}Trong ví dụ này:
- Khi thiết bị ở chế độ phương đứng (cao hơn rộng), chúng ta làm sidebar rộng toàn bộ và bỏ float.
- Trong chế độ phương nằm ngang, chúng ta tạo một bố cục bên cạnh nhau với sidebar chiếm 25% rộng.
Đó như thể trang web của bạn đang làm acrobatics, lật giữa phương đứng và nằm ngang một cách duyên dáng!
Kết hợp tất cả lại
Bây giờ chúng ta đã hiểu cơ bản, hãy xem một ví dụ phức tạp hơn kết hợp tất cả những gì chúng ta đã học:
/* Phong cách cơ bản */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333;
}
.container {
width: 80%;
margin: 0 auto;
}
/* Màn hình lớn */
@media screen and (min-width: 1200px) {
body {
font-size: 18px;
}
.container {
max-width: 1140px;
}
}
/* Màn hình trung bình */
@media screen and (min-width: 992px) and (max-width: 1199px) {
body {
font-size: 17px;
}
.container {
max-width: 960px;
}
}
/* Màn hình nhỏ */
@media screen and (max-width: 991px) {
body {
font-size: 16px;
}
.container {
width: 95%;
}
}
/* Màn hình rất nhỏ */
@media screen and (max-width: 576px) {
body {
font-size: 15px;
}
.container {
width: 100%;
padding: 0 15px;
}
}
/* Phong cách phương nằm ngang */
@media screen and (orientation: landscape) and (max-height: 500px) {
.header {
position: static;
}
.main-content {
margin-top: 20px;
}
}Ví dụ này cho thấy cách chúng ta có thể tạo một thiết kế phản hồi hoàn chỉnh, thích ứng với nhiều kích thước màn hình và phương향.
Kết luận
Chúc mừng! Bạn đã chính thức bước vào thế giới thiết kế web phản hồi với truy vấn media. Nhớ rằng, tạo các trang web phản hồi như thể bạn là một người có khả năng thay đổi hình dạng - nội dung của bạn nên trông tuyệt vời không matter nó ở dạng nào.
Khi bạn thực hành và thử nghiệm với truy vấn media, bạn sẽ phát triển trực giác để tạo ra các thiết kế hoạt động mượt mà trên tất cả các thiết bị. Hãy tiếp tục khám phá, tiếp tục lập trình, và quan trọng nhất, hãy vui vẻ! Trang web của bạn sẽ cảm ơn bạn bằng cách trông rạng rỡ ở mọi nơi.
| Phương pháp | Mô tả |
|---|---|
@media screen |
Chỉ mục tất cả các loại màn hình |
max-width |
Đặt điều kiện chiều rộng tối đa |
min-width |
Đặt điều kiện chiều rộng tối thiểu |
orientation: portrait |
Chỉ mục thiết bị ở chế độ phương đứng |
orientation: landscape |
Chỉ mục thiết bị ở chế độ phương nằm ngang |
Chúc các bạn lập trình vui vẻ, và mong rằng các trang web của bạn luôn phản hồi!
Credits: Image by storyset