Bài 02: Sử dụng @Media CSS tạo Responsive cho Website

Trong bài này mình sẽ ra mắt tới những bạn một thuộc tính trong CSS3 dùng để tạo responsive đó là thuộc tính @ truyền thông .

test php

banquyen png

Bài viết này được đăng tại

freetuts.net

, không được copy dưới mọi hình thức.

1. @media CSS là gì?

@ truyền thông CSS là một tính năng mới của CSS3, tính năng này được 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 thông minh smart phone và những 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ì tất cả chúng ta thường sử dụng ba thuộc tính đó thôi. Và trước khi đi vào khám phá những 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í dụ: Nếu chiều rộng của trình duyệt nhỏ hơn hoặc bằng 480px thì ẩn class .large.

@media only screen and (max-width: 480px){
  .large{
      display: none;
  }
}

Với đoạn code này thì khi bạn sử dụng điện thoại hoặc kéo nhỏ trình duyệt nhỏ hơn 480px thì đối tượng HTML đang sử dụng class .large sẽ bị ẩn. Nếu bạn thiết lập trong khoảng nào đó thì sử dụng thêm một điều kiện and nữa.

@media only screen and (max-width: 480px) and (min-width: 320px){
  .large{
      display: none;
  }
}

Với đoạn code này thì khi chiều rộng nằm trong khoảng chừng 324 px – 480 px thì mới có tính năng. Cò nếu ban muốn chỉ có tính năng cho máy in thì làm như sau :

@media only print
  .large{
      display: none;
  }
}

Ngoài cách tạo trực tiếp trong CSS như vậy thì ban hoàn toàn có thể tạo một file riêng và sử dụng thuộc tính truyền thông của thẻ link .

2. Sử dụng @media để tạo Responsive Website

Việc sử dụng truyền thông yên cầu bạn phải thành thạo CSS nói chung và am hiểu về độ phân giải những thiết bị nói riêng. Và sau đây mình sẽ làm một ví dụ nhỏ về cách tạo Responsive .
Cho đoạn mã HTML sau : XEM DEMO





    
        Tạo responsive
        
        
        
    
    
        
LEFT
RIGHT

Chạy giao diện này lên sẽ như sau :

media responsive website 1 png

Đề bài nhu yếu hãy tạo responsive cho layout này theo đúng tiêu chuẩn sau :

  • Nếu kích thước trình duyệt nhỏ hơn 769px thì hiển thị 1 hàng dọc
  • Ngược lại thì hiển thị hai hàng dọc

Lúc này ta sẽ thiết lập CSS như sau :

@media only screen and (max-width: 768px){
    .left, .right{
        float: none;
        width: 100%;
    }
}

Chỉ cần thêm đoạn mã đó thôi là bài toán được xử lý : XEM DEMO
Và đây là hình hiệu quả nếu bạn kéo nhỏ trình duyệt nhỏ hơn 789 px .

media responsive website 2 png

3. Sử dụng @Media với các thiết bị di động và máy tính

Với list những thuộc tính của @ truyền thông thì ta thuận tiện phát hiện ra những thiết bị. Và sau đây là list những câu query @ truyền thông cho những 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) {

}

Galaxy tablets:

* ----------- Galaxy Tab 10.1 ----------- */

/* Portrait and Landscape */
@media 
  (min-device-width: 800px) 
  and (max-device-width: 1280px) {

}

/* Portrait */
@media 
  (max-device-width: 800px) 
  and (orientation: portrait) { 

}

/* Landscape */
@media 
  (max-device-width: 1280px) 
  and (orientation: landscape) { 

}

Nexus tablets:

/* ----------- Asus Nexus 7 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 601px) 
  and (device-height: 906px) 
  and (-webkit-min-device-pixel-ratio: 1.331) 
  and (-webkit-max-device-pixel-ratio: 1.332) {

}

/* Portrait */
@media screen 
  and (device-width: 601px) 
  and (device-height: 906px) 
  and (-webkit-min-device-pixel-ratio: 1.331) 
  and (-webkit-max-device-pixel-ratio: 1.332) 
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device-width: 601px) 
  and (device-height: 906px) 
  and (-webkit-min-device-pixel-ratio: 1.331) 
  and (-webkit-max-device-pixel-ratio: 1.332) 
  and (orientation: landscape) {

}

Kindle Fire:

/* ----------- Kindle Fire HD 7" ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 800px) 
  and (max-device-width: 1280px) 
  and (-webkit-min-device-pixel-ratio: 1.5) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 800px) 
  and (max-device-width: 1280px) 
  and (-webkit-min-device-pixel-ratio: 1.5) 
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 800px) 
  and (max-device-width: 1280px) 
  and (-webkit-min-device-pixel-ratio: 1.5) 
  and (orientation: landscape) {

}

/* ----------- Kindle Fire HD 8.9" ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1.5) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1.5) 
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1.5) 
  and (orientation: landscape) {

}

Laptop:

/* ----------- Non-Retina Screens ----------- */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1) { 
}

/* ----------- Retina Screens ----------- */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (min-resolution: 192dpi) { 
}

Apple Watch:

/* ----------- Apple Watch ----------- */
@media
  (max-device-width: 42mm)
  and (min-device-width: 38mm) { 

}

Môt 360 Watch:

/* ----------- Moto 360 Watch ----------- */
@media 
  (max-device-width: 218px)
  and (max-device-height: 281px) { 

}

Trên là những thiết bị thông dụng. Tuy nhiên nếu bạn muốn biết đúng mực hơn nữa thì hãy vào trang mydivice.io để xem nhé .

4. Lời kết

Như vậy mình đã ra mắt xong tính năng và trách nhiệm của query @ truyền thông, kỳ vọng qua bài này bạn sẽ có cái nhìn tổng quát về cách sử dụng @ truyền thông trong CSS để tạo ra website responsive. Bài này mình xin dừng tại đây, bài tiếp theo mình sẽ hướng dẫn cách sử dụng jQuery để tạo Responsive .