CSS3 08 – CSS3 Media

0
84

1. Giới thiệu về CSS3 Media 

  • Là một hình thức nhận dạng các thiết bị truy cập , kiểm tra khả năng người dùng truy cập nhận biết được chiều rộng chiều cao độ phân giải của trình duyệt.
  • CSS3 Media thường được dùng để thiết kế các website Respontive

2. Cách sử sụng chức năng CSS3 Media

Trước khi đi vào cách dùng chúng ta sẽ tìm hiểu sơ qua một số thuộc tính như sau

  • max-width: chiều rộng tối đa (tại vị trí đang chọn tới – )
  • min-width: chiều rộng tối thiểu (tại vị trí đang chọn  tới + ∞)

Cú pháp

Ví dụ thay đổi màu nền khi kích thước thay đổi
Ở đây màu nền mặc định là màu vàng, nhưng khi vào màn hình có độ rộng <= 300px thì có màu nền là màu đỏ

See the Pen prdzGV by Cao Anh Nhất (@xeko995) on CodePen.dark


Chọn độ rộng nằm giữa khoảng

Cú pháp

Ví dụ khi vào khoảng màn hình có độ rộng tối thiểu là 576px đến độ rộng tối đa 990px thì đổi màu nền sang màu xanh còn các độ rộng khác màu nền màu đỏ

See the Pen yoPLNR by Cao Anh Nhất (@xeko995) on CodePen.dark

*Note: Để hiện thị tốt hơn các bạn có thể copy code về máy và chạy thử.

 

 

Tác giả: Cao Anh Nhất

[Total: 0    Average: 0/5]

LEAVE A REPLY

Please enter your comment!
Please enter your name here