`@media` và Thiết Kế Đáp Ứng
Bài viết này giải thích về @media và thiết kế đáp ứng.
Bạn sẽ học cách tạo bố cục linh hoạt thông qua cú pháp cơ bản và các ví dụ sử dụng @media.
YouTube Video
HTML để Xem trước
css-responsive-media.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Properties Example</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-responsive-media.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Properties For Responsive Design</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header>
19 <h2>@media</h2>
20 </header>
21 <article>
22 <h3>@media Syntax</h3>
23 <section>
24 <header><h4>CSS</h4></header>
25<pre class="sample">
26@media media-type and (condition) {
27 /* Styles applied when the media query is matched */
28}
29</pre>
30 </section>
31 </article>
32 <article>
33 <h3>@media Example : max-width</h3>
34 <section>
35 <header><h4>CSS</h4></header>
36<pre class="sample">
37@media screen and (max-width: 600px) {
38 body {
39 background-color: lightblue;
40 }
41 p {
42 font-size: 14px;
43 }
44}
45</pre>
46 </section>
47 </article>
48 <article>
49 <h3>@media Example : orientation</h3>
50 <section>
51 <header><h4>CSS</h4></header>
52<pre class="sample">
53@media screen and (orientation: landscape) {
54 body {
55 background-color: lightgreen;
56 }
57}
58</pre>
59 </section>
60 </article>
61 <article>
62 <h3>@media Example : min-width & max-width</h3>
63 <section>
64 <header><h4>CSS</h4></header>
65<pre class="sample">
66@media screen and (min-width: 768px) and (max-width: 1024px) {
67 body {
68 background-color: lightgray;
69 }
70}
71</pre>
72 </section>
73 </article>
74 <article>
75 <h3>@media Example : devices</h3>
76 <section>
77 <header><h4>CSS</h4></header>
78<pre class="sample">
79/* Mobile styles */
80@media screen and (max-width: 600px) {
81 body {
82 font-size: 14px;
83 }
84}
85
86/* Tablet styles */
87@media screen and (min-width: 601px) and (max-width: 1024px) {
88 body {
89 font-size: 16px;
90 }
91}
92
93/* Desktop styles */
94@media screen and (min-width: 1025px) {
95 body {
96 font-size: 18px;
97 }
98}
99</pre>
100 </section>
101 </article>
102 </main>
103</body>
104</html>Quy tắc @media
@media là một quy tắc sử dụng truy vấn phương tiện trong CSS để áp dụng các kiểu dựa trên các điều kiện cụ thể. Điều này cho phép các CSS khác nhau được áp dụng theo kích thước màn hình thiết bị, hướng thiết bị, độ phân giải, hoặc các đặc điểm khác. Chủ yếu được sử dụng cho thiết kế đáp ứng, giúp điều chỉnh giao diện trên các thiết bị khác nhau như máy tính bàn, máy tính bảng và di động.
Cú pháp Cơ bản
1@media media-type and (condition) {
2 /* Styles applied when the media query is matched */
3}- Trong
media-type, chỉ định loại phương tiện (ví dụ:screen,print). - Trong
condition, chỉ định các điều kiện như kích thước màn hình hoặc độ phân giải.
Các loại phương tiện
- screen: Kiểu dáng dành cho hiển thị trên màn hình, như trên máy tính và điện thoại thông minh.
- print: Đây là kiểu dáng được áp dụng khi in ấn.
- all: Đây là kiểu dáng được áp dụng cho tất cả các loại phương tiện.
Các Điều kiện Thường xuyên Sử dụng
- min-width / max-width: Áp dụng các kiểu theo chiều rộng tối thiểu/tối đa của màn hình.
- min-height / max-height: Áp dụng các kiểu theo chiều cao tối thiểu/tối đa của màn hình.
- orientation: Chỉ định hướng màn hình (
portraitcho dọc,landscapecho ngang). - resolution: Áp dụng các kiểu dựa trên độ phân giải màn hình (ví dụ: DPI).
Ví dụ sử dụng
Thay đổi kiểu dựa trên chiều rộng màn hình
Ví dụ, để chỉ định các kiểu được áp dụng khi chiều rộng màn hình nhỏ hơn 600 pixel, bạn có thể viết như sau:.
1@media screen and (max-width: 600px) {
2 body {
3 background-color: lightblue;
4 }
5 p {
6 font-size: 14px;
7 }
8}- Trên các thiết bị có chiều rộng màn hình 600px hoặc nhỏ hơn, màu nền chuyển thành xanh nhạt và cỡ chữ đoạn văn sẽ trở thành 14px.
Các kiểu dựa trên hướng màn hình
Để áp dụng các kiểu khi thiết bị ở chế độ ngang (landscape), bạn có thể viết như sau:.
1@media screen and (orientation: landscape) {
2 body {
3 background-color: lightgreen;
4 }
5}- Khi màn hình ở chế độ ngang (landscape mode), màu nền sẽ chuyển thành xanh lá nhạt.
3. Ví dụ về việc kết hợp nhiều điều kiện
Bạn có thể kết hợp nhiều điều kiện với and để áp dụng kiểu dáng cho các điều kiện cụ thể hơn.
1@media screen and (min-width: 768px) and (max-width: 1024px) {
2 body {
3 background-color: lightgray;
4 }
5}- Nếu chiều rộng màn hình nằm trong khoảng từ 768px đến 1024px, màu nền sẽ chuyển sang màu xám nhạt.
Ví dụ ứng dụng: Thiết kế Responsive
1/* Mobile styles */
2@media screen and (max-width: 600px) {
3 body {
4 font-size: 14px;
5 }
6}
7
8/* Tablet styles */
9@media screen and (min-width: 601px) and (max-width: 1024px) {
10 body {
11 font-size: 16px;
12 }
13}
14
15/* Desktop styles */
16@media screen and (min-width: 1025px) {
17 body {
18 font-size: 18px;
19 }
20}Trong thiết kế responsive, thường áp dụng các bố cục khác nhau tùy thuộc vào chiều rộng màn hình.
- Kích thước phông chữ thay đổi trên điện thoại di động (600px trở xuống), máy tính bảng (601px đến 1024px) và máy tính để bàn (1025px trở lên).
Tóm tắt
@media là một công cụ mạnh mẽ để chuyển đổi kiểu dáng CSS theo thiết bị và kích thước màn hình, và là yếu tố cần thiết trong thiết kế responsive. Bằng cách sử dụng linh hoạt các điều kiện như min-width và max-width, bạn có thể tạo một trang web tối ưu hóa cho các thiết bị khác nhau.
Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.