Share vì hữu ích

Với số lượng người dùng các thiết bị mobile, tablet với các kiểu khung hình khác nhau, câu hỏi đặt ra là làm thế nào để tăng khả năng trải nghiệm tốt nhất cho website của bạn. Responsive Web Design sẽ là câu trả lời cho điều này.

Responsive Web Design là gì?

Responsive Web Design (Thiết kế website tương thích di động) là cách thức bạn xây dựng một website đáp ứng trên mỗi thiết bị và kích thước khung hình khác nhau, không cần biết là khung lớn, nhỏ hay máy tính (desktop). Với cách thức này, trải nghiệm của người dùng trên mỗi thiết bị sẽ tăng rõ rệt. Chẳng hạn, trên khung hình của điện thoại, mọi thứ vẫn hiển thị rõ ràng, đầy đủ và tinh tế hơn.

Bản thân khái niệm Responsive Web Design được Ethan Marcotte đưa ra trong cuốn sách “Responsive Web Design”. Bạn nên đọc để có cái nhìn toàn diện và sâu sắc hơn.

Dưới đây là ví dụ về cách thức một website đáp ứng các khung hình tiêu chuẩn:

FoodSense là một website đẹp có thể hiển thị tốt trên tất cả khung hình thiết bị di động lẫn desktop.
FoodSense là một website đẹp có thể hiển thị tốt trên tất cả khung hình thiết bị di động lẫn desktop.

Phân biệt Responsive Web Design và Thích ứng với Mobile

Mặc dù cả Responsive Web Design và Thích ứng với Mobile (Adaptive Mobile) đều có cách xử lý khá giống nhau, và cùng thay đổi bố cục website ở một thời điểm khung hình có kích thước nào đó, chúng vẫn có những sự khác nhau.

Responsive được hiểu là nhanh chóng thay đổi và phù hợp với hầu hết các thay đổi, trong khi Adaptive có nghĩa là dễ dàng sửa đổi cho các mục đích, tình huống cụ thể.

Responsive có thể hoạt động và cập nhật liên tục bố cục, chẳng hạn như khi chiều dài lẫn chiều rộng cửa sổ thay đổi, trong khi Adaptive sẽ chỉ thay đổi trên các nhóm yếu tố định nghĩa sẵn, ví dụ khung 480px, khung 1024px.

Hoàn hảo nhất là khi bạn tận dụng cả hai vào làm một, giúp website hoạt động mượt mà trơn tru.

Thêm vào đó, trên các điện thoại di động, nếu bạn làm riêng giao diện mobile và giao diện máy tính, việc sửa chữa, bảo trì là rất phức tạp, mặc dù giao diện trên mobile có thể nhẹ, nhưng lại cần bạn mỗi lần nâng cấp, cập nhật phải làm trên cả hai giao diện.

Hiện tại, kĩ thuật phổ biến nhất là sử dụng Responsive Web Design. Nó mang lại đủ cả ba yếu tố: responsive, adaptive và mobile.

Cách xây dựng Responsive Web Design

Để hoàn thiện kĩ năng xây dựng Responsive Web Design, bạn cần nắm ba phần quan trọng:

  1. Bố cục linh hoạt
  2. Media Queries
  3. Media linh hoạt

Phần 1: Bố cục linh hoạt

Phần nào bao gồm cách thức xây dựng bố cục đơn giản nhưng linh hoạt, có thể resize chiều dài (width) tới bất kỳ khung hình nào. Các lưới linh hoạt này được xây dựng trên các đơn vị tính, hầu hết nên sử dụng phần trăm (%), chẳng hạn cột có độ rộng là 25%, và đơn vị em (để tạo ra khoảng cách giữa các cột). Các đơn vị này thường được sử dụng để khai báo các thuộc tính của lưới (grid) như chiều rộng, lề hai bên, và lề bên trong.

Ngược lại với cách viết CSS cũ, cách viết này yêu cầu bạn nên sử dụng các con số linh hoạt, TRÁNH sử dụng các đơn vị truyền thống như pixel hay inch. Bởi vì sự thay đổi của khung màn hình liên tục dẫn tới sự thích nghi của bố cục web cần thay đổi theo tỷ lệ.

Chẳng hạn, với bố cục 1 cột bên, ta có các đối tượng sau:

.wrapper {
  display: flex;
  flex-wrap: wrap; /* To make it responsive when needed */
}
.sidebar {
  width: 25%;
}
.content {
  width: 75%;
}

Để tạo ra khoảng cách giữa các đối tượng, bạn nên sử dụng padding.

.sidebar {
  width: 25%;
  padding: 0 1em;
}
.content {
  width: 75%;
  padding: 0 1em;
}

Để bù lại khoảng cách này, đối tượng cha của cả hai đối tượng con nên sử dụng margin âm:

.wrapper {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -1em;
}

Để tạo các bố cục với độ rộng khác nhau, chẳng hạn như giới hạn tối đa của bố cục, ta thường sử dụng .container bên trong:

.container {
  width: 100%;
  max-width: 70em;
  margin: 0 auto; /* Center alignment */
  padding: 0 1em;
}

Ví dụ về markup:

Ví dụ về layout container

Phần 2: Media Queries

Media Queries được xây dựng như một cách mở rộng các đối tượng. Nó giúp chúng ta đặt các kiểu style khác nhau cho đối tượng trên các trình duyệt và tỷ lệ khung hình khác nhau.

Cách thức sử dụng Media Queries

Có một vài cách bạn có thể sử dụng Media Queries.

  • Sử dụng trực tiếp cú pháp @media ở trong fle style sẵn có.
  • Tạo 1 file chứa Media Queries riêng và @import nó vào CSS.
  • Gắn riêng mỗi file style trên các khung hình khác nhau vào qua HTML.

Chẳng hạn, bạn có thể gắn như thế này trong thẻ <HEAD> của website để áp dụng file style cho khung hình cụ thể nào đó:

<!-- Separate CSS File -->
<link href="styles.css" rel="stylesheet" media="all and (max-width: 1024px)">

Hoặc trong file CSS style của website, bạn thêm các Media Queries:

/* @media Rule */
.hero { width: 50%; }
@media all and (max-width: 1024px) {
  .hero { width: 100%; }
}
/* @import Rule */
@import url(styles.css) all and (max-width: 1024px) {...}

Trong file SCSS, bạn có thể nhập lồng vào trong khung như thế này:

$tablet-breakpoint: 1024px;
.hero {
  width: 100%;
  @media (max-width: $tablet-breakpoint) {
    width: 50%;
  }
}

Các logic điều kiện trong Media Queries

Việc sử dụng hợp lý các điều kiện trong Media Queries giúp truy vấn vào các khung màn hình khác nhau hoạt động trơn tru.

Mobile Responsive

Mobile Responsive là các điều kiện ưu tiên cho đối tượng được đặt cho khung từ 0 đến 320px (hoặc 480px, tuỳ theo từng project), và được ghi đè ở các khung lớn hơn.

Đa khung hình phức tạp

Trong một số trường hợp, các thuộc tính chỉ tồn tại ở một khoảng độ rộng màn hình nào đó, ví dụ từ 800px đến 1024px, thì ta có thể dùng điều kiện and:

@media all and (min-width: 800px) and (max-width: 1024px) {...}

Ngược lại, nếu ở một khung hình nào đó ta không có giá trị cần nêu ra và chỉ áp dụng trong các khung hình còn lại, ta sẽ sử dụng not:

@media not screen and (color) {...}

Sử dụng “only” sẽ không hỗ trợ trên các trình duyệt sử dụng HTML4, bởi vậy code ví dụ như dưới đây sẽ không được kích hoạt nếu không phải màn hình xoay dọc.

@media only screen and (orientation: portrait) {...}

Lời khuyên: bạn nên lựa chọn sử dụng Mobile-First để dễ dàng áp dụng và chỉnh sửa hơn.

Media Queries không thể hoạt động với IE8 và các phiên bản thấp hơn. Một số thư viện hỗ trợ sẽ cung cấp cách xử lý bằng Javascript bao gồm Respond.jsCSS3-MediaQueries.js.

ViewPort

Các thiết bị di động thường cung cấp phần hỗ trợ cho người dùng khi duyệt web, chẳng hạn như thu phóng và độ phân giải của web. Apple đã phát minh ra cách sử dụng thẻ meta để thực hiện điều này.

Sử dụng viewport trong trình duyệt di động

Nếu bạn không sử dụng thẻ <meta name="viewport">, web của bạn sẽ gặp đôi chút trục trặc, chẳng hạn như quá nhỏ hoặc kích thước các bố cục bị dài quá khung màn hình.

Sử dụng <meta name="viewport" content="width=device-width"> sẽ cho phép thiết bị biết được kích thước khung hình và hiển thị tốt hơn nhiều.

Viewport Scale

Để giới hạn độ thu phóng của website trên trình duyệt di động, bạn có thể sử dụng các thuộc tính dưới đây:

  • minimum-scale
  • maximum-scale
  • initial-scale
  • user-scalable

Thông thường, initial-scale sẽ có giá trị là 1. Nó có thể nhận các giá trị là số nguyên từ 0 đến 10.

Viewport Resolution

<meta name="viewport" content="target-densitydpi=device-dpi">

Các giá trị có thể thay thế:

  • device-dpi
  • high-dpi
  • medium-dpi
  • low-dpi
  • (một số dpi nào đó)

Sử dụng giá trị điểm ảnh là rất hiếm, nhưng nó sẽ rất cần nếu bạn muốn làm website bằng thư viện ảnh có chất lượng cao chẳng hạn.

Media linh hoạt

Cuối cùng, nhưng không kém phần quan trọng, là cách các đối tượng media được xử lý trong Responsive Web Design. Khi khung hình thay đổi, không phải lúc nào media cũng sẽ phù hợp. Hình ảnh, video hay audio cần phải có khả năng thay đổi kích thước cũng như tỷ lệ thì mới đáp ứng tiêu chuẩn Responsive Web.

Một cách nhanh nhất là đặt thuộc tính: max-width: 100%. Làm như vậy sẽ đảm bảo bất kỳ media nào sẽ nhanh chóng chuyển xuống bám theo vị trí của khung container.

img, video, picture, canvas {
  max-width: 100%;
}

Bạn có thể xem ví dụ sau:

Tuy vậy, không phải lúc nào nó cũng hiển thị hoàn hảo, và đặc biệt là khi bạn cần tỷ lệ khung hình chuẩn. Chẳng hạn, video HD 16:9 thì bất kỳ độ rộng màn hình nào, cả xoay ngang dọc, nó vẫn cần là 16/9 đúng không?

Để làm điều này, ta cần sử dụng CSS Aspect ratio như đoạn code mẫu sau:

<figure class="media__figure">
  <iframe class="media__iframe" src="https://www.youtube.com/embed/4Fqg43ozz7A"></iframe>
</figure>
.media__figure {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 */
}
.media__iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Tổng kết

Không dễ để làm quen với Responsive Web Design khi bạn mới bắt đầu làm tới, hoặc khi bạn đã quá quen với các class có sẵn của Bootstrap. Để trở thành một Junior Frontend Developer, kiến thức về Responsive của bạn phải thật chắc chắn. Hi vọng bài viết này sẽ giúp bạn hiểu và áp dụng nó chính xác hơn.

Bài viết lược dịch từ blog Shay Howe

Share vì hữu ích

Tác giả: Khôi 'Pro' Nguyễn

Technical Lead tại Solis Lab. Quản lý ngôn ngữ tại vi.wordpress.org.

Trả lời