Tiếp tục chuỗi series hành trình tìm hiểu và chinh phục CSS, bài viết ngày hôm nay CNET sẽ tiếp tục cùng bạn đọc tìm hiểu về một công cụ quan trong khác để tối ưu Website của mình - CSS Media Queries. Là một công cụ không thể thiếu trong công cụ phát triển web hiện đại, CSS Media Queries mang lại khả năng linh hoạt cho việc thiết kế giao diện web. Khám phá cách sử dụng Media Queries để điều chỉnh giao diện trang web dựa trên kích thước màn hình và các điều kiện khác. Bằng cách này, có thể đảm bảo rằng trang web của chúng ta sẽ hiển thị tốt trên mọi thiết bị, từ máy tính để bàn đến điện thoại di động.
- Khám phá CSS Media Queries - Định nghĩa và cách sử dụng
- Cấu trúc cú pháp của CSS Media Queries
- Làm quen với CSS Media Queries bằng một vài ví dụ đơn giản.
1.Khám phá CSS Media Queries - Định nghĩa và cách sử dụng
CSS Media Queries là một tính năng trong CSS cho phép điều chỉnh giao diện của trang web dựa trên các điều kiện của thiết bị và môi trường hiển thị. Bằng cách trên, sẽ cho phép tối ưu hóa trải nghiệm người dùng trên các thiết bị và kích thước màn hình khác nhau.
Sử dụng Media Queries, ta có thể xác định các quy tắc CSS cụ thể sẽ được áp dụng cho các điều kiện nhất định, chẳng hạn như độ rộng màn hình, độ phân giải, tỉ lệ khung hình, hoặc loại thiết bị(từ máy tính để bàn đến điện thoại di động, và từ màn hình lớn đến màn hình nhỏ.)
2. Cấu trúc cú pháp của CSS Media Queries
Cú pháp cơ bản của CSS Media Queries bao gồm từ khóa @media kết hợp với các điều kiện, nó bao gồm một loại phương tiện và có thể chứa một hoặc nhiều tính năng phương tiện, có thể phân giải thành đúng hoặc sai. Dưới đây là cú pháp của của CSS Media Queries cơ bản:
@media not|only mediatype and (media feature) and (media feature) {
CSS-Code;
}
Trong đó có thể giải thích như sau:
@media: Từ khóa khởi đầu một Media Query.
not|only: Đây là một phần tùy chọn của cú pháp, được sử dụng để chỉ định rằng các quy tắc CSS sẽ áp dụng khi điều kiện không được đáp ứng (cho not) hoặc chỉ khi điều kiện được đáp ứng (cho only). Bạn có thể sử dụng not khi muốn áp dụng quy tắc cho tất cả các thiết bị ngoại trừ một số trường hợp cụ thể, và only khi muốn chỉ áp dụng quy tắc cho các thiết bị nhất định.
mediatype: Đây là loại phương tiện, một số loại như:
- screen:Được sử dụng cho màn hình máy tính, máy tính bảng, điện thoại thông minh, v.v.
- print: Được sử dụng cho chế độ xem trước bản in
- speech: Được sử dụng cho phiên bản hỗ trợ đọc thành tiếng.
- all: Được sử dụng cho tất cả các loại thiết bị đa phương tiện
Loại phương tiện này xác định nơi mà Media Query sẽ áp dụng.
(media feature): Đây là điều kiện cụ thể mà Media Query sẽ kiểm tra. Các điều kiện này có thể bao gồm width, min-width, max-width, orientation, resolution, và nhiều hơn nữa.
CSS-Code: Đây là các quy tắc CSS sẽ được áp dụng khi tất cả các điều kiện trong Media Query được đáp ứng.
Lưu ý: mediatype là tùy chọn (nếu bị bỏ qua, nó sẽ được đặt thành tất cả).
3. Làm quen với CSS Media Queries bằng một vài ví dụ đơn giản.
Để hiểu rõ thêm về Media Queries, CNET sẽ đưa bạn tới một số ví dụ cụ thể để bạn đọc có thể nắm rõ hơn:
Ta có một ví dụ đầu tiên với thẻ h1 và p chứa nội dung và màu nền background-color là pink, khi áp dụng Media Queries trong đó đặt điều kiện:
mediatype: là screen
(media feature): min-width: 480px
Tiếp theo đó CSS-Code các quy tắc được áp dụng sẽ là thẻ body có background-color:lightblue;
Kết quả là màu nền sẽ thay đổi màu nền thành xanh nhạt nếu khung nhìn rộng 480 pixel hoặc rộng hơn (nếu khung nhìn nhỏ hơn 480 pixel, màu nền sẽ có màu hồng)
Hay ở một ví dụ khác, cũng với thẻ h1 và p chứa nội dung và màu nền background-color là red, khi áp dụng Media Queries trong đó đặt điều kiện:
mediatype: là screen
(media feature): max-width: 720px
Tiếp theo đó CSS-Code các quy tắc được áp dụng sẽ là thẻ body có background-color:lightgreen;
Khi đó, khi khung nhìn màn hình rộng tối đa là 720px, màu nền sẽ là màu xanh(lightgreen) và khi vượt qua 720px màu nên sẽ là red(đỏ)
Thông qua việc sử dụng CSS Media Queries, giúp có thể tối ưu hóa trải nghiệm người dùng trên mọi thiết bị và kích thước màn hình khác nhau. Responsive design không chỉ là một xu hướng, mà còn là một phần quan trọng của việc phát triển web hiện đại. Hãy vận dụng CSS Media Queries vào trang web của bạn để đảm bảo một trải nghiệm người dùng tốt nhất.
Tham khảo về KHÓA HỌC LẬP TRÌNH WEB FULL-STACK tại Học viện công nghệ CNET
