Tìm hiểu Responsive Web Design

Trần Đức Lĩnh

(RWD) viết tắt của cụm từ Responsive Web Design, một xu hướng thiết kế và phát triển trang web phù hợp, đáp ứng mọi thiết bị và tích thước [width] X [height].


Mục lục.

Lợi ích của Responsive Web Design.

  • Giúp tiết kiệm khá nhiều thời gian và chi phí duy trì từng phiên bản cho từng thiết bị khác nhau bao gồm điện thoại và máy tính.
  • SEO (search ranking) được cải thiện, mọi luồn đều dẫn đến 1 URL duy nhất thay vì nhiều URL khác nhau...
  • Dễ dàng bảo trì trang web mà không liên quan đến phía máy chủ (server), đơn giản chỉ việc thay đổi HTMLCSS để thay đổi bố cục.

Xác định trước vấn đề khi nào dùng (max-width) và (min-width).

(min-width)

Khi chiều rộng tối thiểu thường được ưu tiên cho các thiết bị di động sẽ dùng min-width.

@media only screen and (min-width: 320px) {
    /* Code here */
}

(max-width)

Nếu muốn giai hạn các tích cỡ nhỏ hơn hoặc tối đa, khi đó sẽ sử dụng max-width.

@media only screen and (max-width: 740px)
{
    /* Code here */
}

Các thành phần tạo nên Responsive Web Design.

  • Flexible Grid based layout
  • Media Queries
  • Flexible Media

1. Flexible Grid Based Layouts.

  • Viewport là khung hình người dùng nhìn thấy trên các thiết bị của họ khi vào một trang web bất kì, mỗi thiết bị khác nhau lại có một viewport khác nhau. Nếu trang web cố định khích thước thì trình duyệt sẽ tự động thu nhỏ nội dung từ dạng máy tính -> smartphone, người dùng sẽ không có được sự trải nghiệm tốt nhất.

HTML5 cung cấp phương pháp kiểm soát view thông qua thẻ <meta>.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Trong đó:
- width=device-width thiết lập chiều rộng trang web theo chiều rộng của thiết bị.
- initial-scale=1.0 thiết lập mức độ zoom ban đầu của trang web được load bởi trình duyệt.

  • GridView là gì? GridView là trang web được chia thành các cột đều nhau, một gridview có 12 cột tương ứng với 100% độ rộng, và sẽ thu nhỏ hoặc mở rộng khi thay đổi kích thước trình duyệt.

2. Media Queries.

Media Queries là một kỹ thuật CSS3, sử dụng @media để bao bọc một khối các thuộc tính CSS nhất định phải là đúng, (định nghĩa riêng cho từng nhóm thiết bị có tích thước màng hình giống nhau).

<link href="styles.css" rel="stylesheet" media="all and (max-width: 945px)">
// @media rule
@media all and (max-width: 945px) {...}

// @import rule
@import url(styles.css) all and (max-width: 945px) {...}

Mỗi @media có nhiều biểu thức theo sau nó bao gồm all, screen, tv, print, 3d-glasses. Mặc định sẽ là screen nếu @media type không được khai báo.


  • Các biểu thức bên trong Media Queries

    • Bao gồm toán tử logic and, notonly.

      • (and) cho phép thêm điều kiện bổ sung (chọn tất cả các màng hình có chiều rộng từ 450px - 945px).
      @media all and (min-width: 450px) and (max-width: 945px) {...}
      • (not) phủ định các truy vấn được xác định (các thiết bị màng hình không màu).
      @media not screen and (color) {...}
      • (only) áp dụng cho truy vấn thoả điều kiện (chọn các màng hình chỉ theo chiều dọc).
      @media only screen and (orientation: portrait) {...}
  • Media Features trong Media Queries

    • Media Features xác định các loại thuộc tính thành phần nằm bên trong Media Queries
    • Height & Width là những lựa chọn phổ biến của Media Features, bao gồm xác định width X height của ViewPort trong các thiết bị hoặc browser, widthheight có thể được xác định đơn vị tuyệt đối hoặc tương đối và đi kèm theo các tiền tố min hoặc max để giới hạn chiều dài hoặc chiều rộng muốn truy vấn.
@media all and (min-width: 320px) and (max-width: 945px) {...}
  • Orientation: Portrait / Landscape có trong Media queries dùng để xác định hướng của trình duyệt, sử dụng từ khoá orientation cho phép xác định hướng ngang(portrait) hay dọc(landscape). Sử dụng chủ yếu trên cách thiết bị di động.
@media all and (orientation: landscape) {...}
  • Aspect Ratio xác định tỷ lệ khung hình có trong Media queries, cho phép chỉ định tỉ lệ chiều rộng hoặc chiều caocủa thiết bị mà bạn muốn truy vấn chúng, có thể kèm theo tiền tố max hoặc min.
@media all and (min-device-aspect-ratio: 16/9) {...}
  • Resolution sẽ xác định độ phân giải của thiết bị đầu ratheo mật độ pixel (mật đổ điểm ảnh trên mỗi inch). Không có tiền tố max hoặc min, thay vào đó sẽ là số điểm ảnh trên mỗi pixel dppx và số điểm ảnh trên cm dpcm
@media print and (min-resolution: 300dpi) {...}
  • Nguyên tắc Mobile First
  • Luôn thiết kế layout cho mobile trước rồi đếm các thiết bị màng hình lớn.
/*Smartphone nhỏ*/
@media screen and (min-width: 240px){
    
}
/*Smartphone lớn (480 x 640)*/
@media screen and (min-width: 320px){
    
}
/*Tablet nhỏ(480 x 640)*/
@media screen and (min-width: 480px){
    
}
/*Tablet dọc(768 x 1024)*/
@media screen and (min-width: 768px){
    
}
/*Tablet ngang(1024 x 768)*/
@media screen and (min-width: 1024px){

}

3. Flexible Media.

(Ảnh, video...) cũng có khả năng thay đổi kích thước đấy.

  • width đạt tích cỡ tương đối so với màng hình, height sẽ tự động điều chỉnh chiều cao sao cho phù hợp với tích cỡ màng hình.
img {
    width: 100%;
    height: auto;
}
  • Nếu muốn thay đổi viewport không vượt quá kích thước gốc thì chỉ cần sử dụng max-width.
img {
    max-width: 100%;
    height: auto;
}

Xác định chiều dài @media

Việc xác định được chia làm 3 cách, tùy thuộc vào cá nhân xây dựng dự án, hoặc tùy vào thư viện đã có trước đó.

1) Xác định dựa vào thiết bị phổ biến.

Dựa vào thiết bị phổ biến mà các dự án có thể xác định từng thiết bị cụ thể rồi tạo RWD.

Có 3 độ rộng phổ biến nhất:

  • 320px sử dụng cho thiết bị di động.
  • 768px dùng nhiều trong các máy tính bảng.
  • 1024px tích cỡ này xuất hiện nhiều trong các laptop, PC.

Danh sách tỷ lệ màng hình được sử dụng.

Danh sách tỷ lệ màng hình (2016)...
  • 360x640 (~16%)
  • 1366x768 (~14%)
  • 1920x1080 (~7%)
  • 375x667 (~3.7%)
  • 1280x800 (~3.1%)
  • 320x568 (~3%)
  • 1280x768 (~3%)
  • 1440x900 (~2.9%)
  • 1600x900(~2.8%)
  • 720x1280 (~2.8%)
  • 480x800 (~2.7%)
  • 1280x1024 (~2.6%)
  • 320x534 (~2.2%)
  • Khác (~30%)...

Mô phỏng RWD khi phụ thuộc vào thiết bị.

/* ----------- iPhone 6, 6S, 7 and 8 ----------- */
 
/* 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) {
 
}

2) Dựa vào nội dung.

Cách này phụ thuộc nhiều vào nội dung website như thế nào. Ưu tiên khả năng linh hoạt của các layout.

Theo cách này, việc không phụ thuộc lớn vào tích cỡ màng hình thiết bị sẽ giảm đi. Code sẽ nhẹ nhàng hơn nhiều.

@media only screen and (min-width: 768px) and (max-width: 1024px){
    /* Code here */
}

@media only screen (min-width: 1024px){
/* Code here */
}

3) Dựa vào các thư viện có hỗ trợ RWD đang sử dụng.

Các thư viện CSS hiện nay đa số có hỗ trợ RWD, chỉ cần dựa vào các thông số đã cho trước để canh chỉnh layout cho phù hợp.

@media (min-width: 640px){
    /* Code here */
}
 
@media (min-width: 768px){
    /* Code here */
}
 
@media (min-width: 1024px){
    /* Code here */
}
 
@media (min-width: 1200px){
    /* Code here */
}