CSS3 20 – Ví dụ Media Query trong CSS

0
236

Xin chào các bạn, ở phần học CSS trước, chúng ta đã có 1 bài viết nói về @media trong CSS tạo Responsive cho Website, ở bài đó, mình đã giới thiệu hết cho các bạn về quy tắc cũng như cú pháp sử dụng. Và bài hôm nay, chúng ta sẽ áp dụng kiến thức đó để làm 1 số ví dụ điển hình trong Reponsive Website nhé!

Ví dụ 1: Thay đổi màu nền trên các thiết bị

Ví dụ này, chúng ta sẽ áp dụng @media để thay đổi màu nền trên các thiết bị khác nhau cho wensite

Ví dụ Media Query trong CSS

Chuẩn bị HTML:

Trang trí CSS:

Kết quả như sau:

Ví dụ 2: Media Queries cho Menu

Ví dụ tiếp theo này, mình sẽ sử dụng media query để tạo reponsive cho thanh menu.

Menu sẽ hiển thị khác nhau trên các trình duyệt khác nhau. Cụ thể, màn hình dưới 600px, mình sẽ cho menu hiển thị dọc, còn trên các màn hình lớn hơn 600px, menu sẽ hiển thị ngang nhờ thuộc tính float: left

Code HTML:

Code CSS:

Kết quả như sau:

Kết luận

Trên đây là 1 số ví dụ điển hình để các bạn có thể áp dụng Media Query vào thực tế xây dựng Reponsive website, hy vọng các bạn đã có những kiến thức bổ ích qua bài học này.

Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây