Nội dung bài viết
Sử dụng @Media CSS tạo Responsive cho Website
Trong bài này mình sẽ giới thiệu tới các bạn một thuộc tính trong CSS3 dùng để tạo responsive đó là thuộc tính @media.
@media CSS là gì?
@media CSS là một tính năng mới của CSS3, tính năng này cho phép ta tùy chỉnh CSS cho nhiều thiết bị khác nhau từ máy tính cho đến điện thoại smart phone và các thiết bị in ấn. Thuộc tính này có cú pháp như sau:
@media not|only mediatype and (media feature) {
CSS-Code;
}
Trong đó mediatype gồm các thuộc tính hay sử dụng sau:
- all: Dùng cho mọi thiết bị
- print: Dùng cho máy in
- screen: Dùng cho máy tính và các thiết bị smart phone
Thực tế vẫn còn nhiều nữa nhưng với lập trình web thì chúng ta thường sử dụng ba thuộc tính đó thôi. Và trước khi đi vào tìm hiểu các thuộc tính thì ban phải phân biệt hai khái niệm sau:
- Device: Là thiết bị sử dụng website như Laptop, Desktop, Iphone, ..
- Viewport: Là kích thước hiển thị của giao diện.
Và media featured thì gồm các thuộc tính sau:
- aspect-ratio: Tỉ lệ giữa chiều rộng và chiều cao của viewport
- min-aspect-ratio: Tỉ lệ tối thiểu giữa chiều rộng và chiều cao của viewport
- max-aspect-ratio: Tỉ lệ tôi đa giữa chiều rộng và chiều cao của viewport
- color: Số bits cho mỗi màu sắc của device
- color-index: Số lượng màu sắc mà device có thể hiển thị
- device-aspect-ratio: Tỉ lệ giữa chiều rộng và chiều cao của device
- max-device-aspect-ratio: Tỉ lệ tối đa giữa chiều rộng và chiều cao của device
- min-device-aspect-ratio: Tỉ lệ tối thiểu giữa chiều rộng và chiều cao của device
- device-height: Chiều cao của device
- device-width: Chiều rộng của device
- height: Chiều cao của viewport
- width: Chiều rộng của viewport
- max-width: Chiều rộng tối đa của viewport
- min-width: Chiều rộng tối thiểu của viewport
- max-height: Chiều cao tối đa của viewport
- min-height: Chiều cao tối thiểu của viewport
- min-device-width: Chiều rộng tối thiểu của device
- max-device-width: Chiều rộng tối đa của device
- min-device-height: Chiều cao tối thiểu của device
- max-device-height: Chiều cao tối đa của device
- orientation: Định hướng của khung nhìn (xoay hoặc không xoay thiết bị)
- resolution: Độ phân giải của thiết bị đầu ra (sử dụng dpi hoặc dpcm)
Với danh sách các thuộc tính của @media thì ta dễ dàng phát hiện ra các thiết bị. Và sau đây là danh sách các câu query @media cho các thiết bị thông dụng.
Iphone:
/* ———– iPhone 4 and 4S ———– */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ———– iPhone 5 and 5S ———– */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ———– iPhone 6 ———– */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ———– iPhone 6+ ———– */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3) {
}
/* Portrait */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape) {
}
Galaxy phones:
/* ———– Galaxy S3 ———– */
/* Portrait and Landscape */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2) {
}
/* Portrait */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ———– Galaxy S4 ———– */
/* Portrait and Landscape */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) {
}
/* Portrait */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Landscape */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {
}
/* ———– Galaxy S5 ———– */
/* Portrait and Landscape */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) {
}
/* Portrait */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Landscape */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {
}
HTC:
/* ———– HTC One ———– */
/* Portrait and Landscape */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) {
}
/* Portrait */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Landscape */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {
}
Ipad:
/* ———– iPad mini ———– */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* Portrait */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* ———– iPad 1 and 2 ———– */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* Portrait */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* ———– iPad 3 and 4 ———– */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {
}
Trên là những thiết bị thông dụng. Tuy nhiên nếu bạn muốn biết chính xác hơn nữa thì hãy vào trang mydivice.io để xem nhé.
