[Bài đọc] RWD Media Queries

Media Queries hoạt động như thế nào?

Media Queries sử dụng @media để áp dụng một khối thuộc tính css chỉ khi thoả mãn một điều kiện nào đó.

Ví dụ:

Trong ví dụ trên, thuộc tính background-color chỉ được áp dụng cho thẻ body trong trường hợp độ rộng của màn hình nhỏ hơn 500px.

Xem ví dụ ở đây (hãy thu nhỏ trình duyệt để xem hiệu ứng): http://demo.codegym.vn/web/15/mediaqueries/color.html

Thêm các breakpoint

Breakpoint là các điểm mà chúng ta sử dụng để kích hoạt việc thay đổi bố cục của trang web. Chẳng hạn, ở ví dụ trước thì breakpoint của chúng ta là 500px của độ rộng.

Trong ví dụ sau đây, chúng ta sẽ sử dụng một breakpoint là 768px (độ rộng phổ biến của một tablet). Nếu độ rộng của trình duyệt nhỏ hơn hoặc bằng 768px thì tất cả các cột đều chiếm độ rộng 100% (có nghĩa là mỗi block sẽ chiếm một dòng).

/* For desktop: */.col-1 {width: 8.33%;}.col-2 {width: 16.66%;}.col-3 {width: 25%;}.col-4 {width: 33.33%;}.col-5 {width: 41.66%;}.col-6 {width: 50%;}.col-7 {width: 58.33%;}.col-8 {width: 66.66%;}.col-9 {width: 75%;}.col-10 {width: 83.33%;}.col-11 {width: 91.66%;}.col-12 {width: 100%;}@media only screen and (max-width: 768px) {    /* For mobile phones: */    [class*="col-"] {        width: 100%;    }}

Xem ví dụ tại đây (thay đổi độ rộng của trình duyệt để thấy hiệu ứng): http://demo.codegym.vn/web/15/mediaqueries/responsive.html

Nên ưu tiên thiết kế cho thiết bị di động trước tiên (Mobile First)

Mobile First là cách thiết kế mà ở đó chúng ta ưu tiên cho các thiết bị di động trước, sau đó mới thêm mã CSS để trang web hiển thị tốt trên các thiết bị to hơn. Điều này sẽ giúp cho việc hiển thị các trang web ở trên các thiết bị di động được nhanh hơn. Tại sao?

Để làm được điều này, chúng ta thay đổi một chút trật tự của các khối CSS. Trong đó, đáng chú ý là thay vì sử dụng điều kiện max-width thì chúng ta sử dụng min-width.

/* For mobile phones: */[class*="col-"] {    width: 100%;}@media only screen and (min-width: 768px) {    /* For desktop: */    .col-1 {width: 8.33%;}    .col-2 {width: 16.66%;}    .col-3 {width: 25%;}    .col-4 {width: 33.33%;}    .col-5 {width: 41.66%;}    .col-6 {width: 50%;}    .col-7 {width: 58.33%;}    .col-8 {width: 66.66%;}    .col-9 {width: 75%;}    .col-10 {width: 83.33%;}    .col-11 {width: 91.66%;}    .col-12 {width: 100%;}}

Thêm một breakpoint khác

Chúng ta có thể thêm nhiều breakpoint để đáp ứng được nhiều loại kích thước của cửa sổ trình duyệt khác nhau. Chẳng hạn, trong ví dụ trên, chúng ta đã thiết kế cho 2 trường hợp là máy tính cá nhân và máy tính bảng.

Trong ví dụ dưới đây, chúng ta sẽ thêm một trường hợp nữa cho điện thoại (thường là có kích thước nhỏ hơn 600px).

/* For mobile phones: */[class*="col-"] {    width: 100%;}@media only screen and (min-width: 600px) {    /* For tablets: */    
.col-m-1 {width: 8.33%;}    
.col-m-2 {width: 16.66%;}    
.col-m-3 {width: 25%;}    
.col-m-4 {width: 33.33%;}    
.col-m-5 {width: 41.66%;}    
.col-m-6 {width: 50%;}    
.col-m-7 {width: 58.33%;}    
.col-m-8 {width: 66.66%;}    
.col-m-9 {width: 75%;}    
.col-m-10 {width: 83.33%;}    
.col-m-11 {width: 91.66%;}    
.col-m-12 {width: 100%;}}
@media only screen and (min-width: 768px) {    /* For desktop: */    
.col-1 {width: 8.33%;}    
.col-2 {width: 16.66%;}    
.col-3 {width: 25%;}    
.col-4 {width: 33.33%;}    
.col-5 {width: 41.66%;}    
.col-6 {width: 50%;}    
.col-7 {width: 58.33%;}    
.col-8 {width: 66.66%;}    
.col-9 {width: 75%;}    
.col-10 {width: 83.33%;}    
.col-11 {width: 91.66%;}    
.col-12 {width: 100%;}}

Xem ví dụ ở đây (thay đổi kích thước trình duyệt để quan sát hiệu ứng): http://demo.codegym.vn/web/15/mediaqueries/responsive-3-breakpoints.html

Thích ứng với chiều xoay của màn hình

Media Queries cũng có thể được sử dụng để giúp trang web hiển thị tốt với các chiều xoay khác nhau (ngang và dọc).

Ví dụ:

@media only screen and (orientation: landscape) {
    body {        
background-color: lightblue;    }}