Thiết kế đáp ứng

Lớp học lập trình này nằm trong khoá học Phát triển ứng dụng web tiến bộ do Nhóm đào tạo nhà phát triển của Google xây dựng. Bạn sẽ nhận được nhiều giá trị nhất qua khoá học này nếu thực hiện các lớp học lập trình theo trình tự.

Để biết đầy đủ thông tin chi tiết về khoá học, hãy xem bài viết Tổng quan về việc phát triển ứng dụng web tiến bộ.

Giới thiệu

Phòng thí nghiệm này hướng dẫn bạn cách tạo kiểu cho nội dung trang web để nội dung đó có khả năng thích ứng.

Kiến thức bạn sẽ học được

  • Cách tạo kiểu cho ứng dụng để ứng dụng hoạt động tốt trên nhiều kiểu dáng
  • Cách sử dụng Flexbox để dễ dàng sắp xếp nội dung thành các cột
  • Cách sử dụng truy vấn nội dung nghe nhìn để sắp xếp lại nội dung dựa trên kích thước màn hình

Những điều bạn cần biết

  • HTML và CSS cơ bản

Bạn cần có

  • Máy tính có quyền truy cập vào thiết bị đầu cuối/vỏ
  • Kết nối Internet
  • Trình chỉnh sửa văn bản

Tải xuống hoặc sao chép kho lưu trữ pwa-training-labs trên github và cài đặt phiên bản LTS của Node.js (nếu cần).

Nếu bạn không có máy chủ phát triển cục bộ ưu tiên, hãy cài đặt gói Node.js http-server:

npm install http-server -g

Chuyển đến thư mục responsive-design-lab/app/ rồi khởi động máy chủ:

cd responsive-design-lab/app
http-server -p 8080 -a localhost -c 0

Bạn có thể chấm dứt máy chủ bất cứ lúc nào bằng cách nhấn Ctrl-c.

Mở trình duyệt rồi chuyển đến localhost:8080/.

Lưu ý: Huỷ đăng ký mọi trình chạy dịch vụ và xoá tất cả bộ nhớ đệm của trình chạy dịch vụ cho localhost để chúng không gây trở ngại cho phòng thí nghiệm. Trong Công cụ của Chrome cho nhà phát triển, bạn có thể thực hiện việc này bằng cách nhấp vào Xoá dữ liệu trang web trong mục Xoá bộ nhớ của thẻ Ứng dụng.

Nếu bạn có trình chỉnh sửa văn bản cho phép mở một dự án, hãy mở thư mục responsive-design-lab/app/. Điều này sẽ giúp bạn dễ dàng sắp xếp mọi thứ hợp lý. Nếu không, hãy mở thư mục đó trong hệ thống tệp của máy tính. Thư mục app/ là nơi bạn sẽ xây dựng phòng thí nghiệm.

Thư mục này chứa:

  • index.html là trang HTML chính cho trang web/ứng dụng mẫu của chúng tôi
  • modernizr-custom.js là một công cụ phát hiện tính năng giúp đơn giản hoá việc kiểm thử khả năng hỗ trợ Flexbox
  • styles/main.css là biểu định kiểu xếp tầng cho trang web mẫu

Quay lại ứng dụng trong trình duyệt. Hãy thử thu hẹp chiều rộng cửa sổ xuống dưới 500px và nhận thấy rằng nội dung không phản hồi tốt.

Mở công cụ dành cho nhà phát triển và bật chế độ thiết bị trong trình duyệt. Chế độ này mô phỏng hành vi của ứng dụng trên thiết bị di động. Lưu ý rằng trang được thu nhỏ để vừa với nội dung có chiều rộng cố định trên màn hình. Đây không phải là một trải nghiệm tốt vì nội dung có thể quá nhỏ đối với hầu hết người dùng, buộc họ phải thu phóng và di chuyển.

Thay thế TODO 3 trong index.html bằng thẻ sau: 

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

Lưu tệp. Làm mới trang trong trình duyệt và kiểm tra trang ở chế độ thiết bị. Lưu ý rằng trang không còn bị thu nhỏ và tỷ lệ của nội dung khớp với tỷ lệ trên thiết bị máy tính. Nếu nội dung hoạt động không như mong đợi trong trình mô phỏng thiết bị, hãy chuyển đổi qua lại giữa chế độ thiết bị để đặt lại.

Lưu ý: Tính năng mô phỏng thiết bị giúp bạn biết gần đúng trang web của mình sẽ trông như thế nào trên thiết bị di động. Tuy nhiên, để có được thông tin đầy đủ, bạn nên luôn kiểm thử trang web của mình trên thiết bị thực. Bạn có thể tìm hiểu thêm về cách gỡ lỗi thiết bị Android trên Chrome và Firefox.

Giải thích

Thẻ meta viewport sẽ hướng dẫn trình duyệt cách kiểm soát kích thước và tỷ lệ của trang. Thuộc tính width kiểm soát kích thước của khung nhìn. Bạn có thể đặt giá trị này thành một số lượng pixel cụ thể (ví dụ: width=500) hoặc thành giá trị đặc biệt device-width,. Đây là chiều rộng của màn hình tính bằng pixel CSS ở tỷ lệ 100%. (Có các giá trị height và device-height tương ứng, có thể hữu ích cho những trang có các phần tử thay đổi kích thước hoặc vị trí dựa trên chiều cao của khung hiển thị.)

Thuộc tính initial-scale kiểm soát cấp độ thu phóng khi trang được tải lần đầu. Việc đặt tỷ lệ ban đầu giúp cải thiện trải nghiệm, nhưng nội dung vẫn tràn ra ngoài viền màn hình. Chúng ta sẽ khắc phục vấn đề này trong bước tiếp theo.

Thông tin khác

Thay thế TODO 4 trong styles/main.css bằng đoạn mã sau:

@media screen and (max-width: 48rem) {
  .container .col {
    width: 95%;
  }
}

Lưu tệp. Tắt chế độ thiết bị trong trình duyệt rồi làm mới trang. Hãy thử giảm chiều rộng cửa sổ. Lưu ý rằng nội dung sẽ chuyển sang bố cục một cột ở chiều rộng đã chỉ định. Bật lại chế độ thiết bị và quan sát thấy nội dung phản hồi để phù hợp với chiều rộng của thiết bị.

Giải thích

Để đảm bảo rằng văn bản có thể đọc được, chúng tôi sử dụng một truy vấn nội dung nghe nhìn khi chiều rộng của trình duyệt là 48rem (768 pixel ở kích thước phông chữ mặc định của trình duyệt hoặc gấp 48 lần kích thước phông chữ mặc định trong trình duyệt của người dùng). Xem bài viết Khi nào nên dùng Em so với Rem để biết giải thích thoả đáng về lý do rem là lựa chọn phù hợp cho các đơn vị tương đối. Khi truy vấn nội dung nghe nhìn được kích hoạt, chúng ta sẽ thay đổi bố cục từ 3 cột thành 1 cột bằng cách thay đổi width của mỗi div trong số 3 div để lấp đầy trang.

Flexible Box Layout Module (Flexbox) là một công cụ hữu ích và dễ sử dụng để giúp nội dung của bạn thích ứng. Flexbox cho phép chúng ta đạt được kết quả tương tự như trong các bước trước, nhưng nó sẽ xử lý mọi phép tính khoảng cách cho chúng ta và cung cấp một loạt thuộc tính CSS sẵn sàng sử dụng để cấu trúc nội dung.

Chú thích các quy tắc hiện có trong CSS

Chú thích tất cả các quy tắc trong styles/main.css bằng cách gói chúng trong /* và */. Chúng ta sẽ đặt những quy tắc này làm quy tắc dự phòng khi Flexbox không được hỗ trợ trong phần Flexbox dưới dạng tính năng nâng cao tăng dần.

Thêm bố cục hộp linh hoạt

Thay thế TODO 5.2 trong styles/main.css bằng đoạn mã sau:

.container {
  display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -ms-flexbox;  /* TWEENER - IE 10 */
  display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
  background: #eee;  
  overflow: auto;
}

.container .col {
  flex: 1;
  padding: 1rem;
}

Lưu mã và làm mới index.html trong trình duyệt. Tắt chế độ thiết bị trong trình duyệt rồi làm mới trang. Nếu bạn thu hẹp cửa sổ trình duyệt, các cột sẽ mỏng đi cho đến khi chỉ còn một cột hiển thị. Chúng ta sẽ khắc phục vấn đề này bằng các truy vấn nội dung nghe nhìn trong bài tập tiếp theo.

Giải thích

Quy tắc đầu tiên xác định container div là vùng chứa linh hoạt. Điều này cho phép một ngữ cảnh linh hoạt cho tất cả các phần tử con trực tiếp của nó. Chúng tôi đang kết hợp cú pháp cũ và mới để hỗ trợ Flexbox rộng hơn (xem phần Để biết thêm thông tin để biết chi tiết).

Quy tắc thứ hai sử dụng lớp .col để tạo các thành phần linh hoạt có chiều rộng bằng nhau. Việc đặt đối số đầu tiên của thuộc tính flex thành 1 cho tất cả div có lớp col sẽ chia đều khoảng trống còn lại giữa các div đó. Điều này thuận tiện hơn so với việc tự tính toán và đặt chiều rộng tương đối.

Thông tin khác

Không bắt buộc: Đặt các chiều rộng tương đối khác nhau

Sử dụng lớp giả nth-child để đặt chiều rộng tương đối của 2 cột đầu tiên thành 1 và cột thứ ba thành 1,5. Bạn phải sử dụng thuộc tính flex để đặt chiều rộng tương đối cho từng cột. Ví dụ: bộ chọn cho cột đầu tiên sẽ có dạng như sau:

.container .col:nth-child(1)

Sử dụng truy vấn đa phương tiện với Flexbox

Thay thế TODO 5.4 trong styles/main.css bằng mã dưới đây:

@media screen and (max-width: 48rem) {
  .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-flow: column;
  }
}

Lưu mã và làm mới index.html trong trình duyệt. Giờ đây, nếu bạn thu hẹp chiều rộng trình duyệt, nội dung sẽ được sắp xếp lại thành một cột.

Giải thích

Khi truy vấn nội dung nghe nhìn được kích hoạt, chúng ta sẽ thay đổi bố cục từ 3 cột thành 1 cột bằng cách đặt thuộc tính flex-flow thành column. Thao tác này sẽ mang lại kết quả tương tự như truy vấn nội dung nghe nhìn mà chúng ta đã thêm ở bước 5. Flexbox cung cấp nhiều thuộc tính khác như flex-flow giúp bạn dễ dàng cấu trúc, sắp xếp lại và căn chỉnh nội dung để nội dung phản hồi tốt trong mọi bối cảnh.

Vì Flexbox là một công nghệ tương đối mới, nên chúng ta cần thêm các giải pháp dự phòng vào CSS.

Thêm Modernizr

Modernizr là một công cụ phát hiện tính năng giúp đơn giản hoá việc kiểm thử khả năng hỗ trợ Flexbox.

Thay thế TODO 6.1 trong index.html bằng mã để thêm bản dựng Modernizr tuỳ chỉnh:

<script src="modernizr-custom.js"></script>

Giải thích

Chúng tôi đưa bản dựng Modernizr vào đầu index.html, bản dựng này sẽ kiểm thử khả năng hỗ trợ Flexbox. Thao tác này chạy kiểm thử khi tải trang và thêm lớp flexbox vào phần tử <html> nếu trình duyệt hỗ trợ Flexbox. Nếu không, phương thức này sẽ thêm một lớp no-flexbox vào phần tử <html>. Trong phần tiếp theo, chúng ta sẽ thêm các lớp này vào CSS.

Lưu ý: Nếu đang sử dụng thuộc tính flex-wrap của Flexbox, chúng ta sẽ cần thêm một bộ phát hiện Modernizr riêng chỉ cho tính năng này. Các phiên bản cũ của một số trình duyệt chỉ hỗ trợ một phần Flexbox và không có tính năng này.

Sử dụng hộp linh hoạt một cách tăng dần

Hãy sử dụng các lớp flexbox và no-flexbox trong CSS để cung cấp các quy tắc dự phòng khi Flexbox không được hỗ trợ.

Bây giờ, trong styles/main.css, hãy thêm .no-flexbox vào trước mỗi quy tắc mà chúng ta đã nhận xét:

.no-flexbox .container {
  background: #eee;
  overflow: auto;
}

.no-flexbox .container .col {
    width: 27%;
    padding: 30px 3.15% 0;
    float: left;
}

@media screen and (max-width: 48rem) {
  .no-flexbox .container .col {
    width: 95%;
  }
}

Trong cùng một tệp, hãy thêm .flexbox trước các quy tắc còn lại:

.flexbox .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: #eee;
  overflow: auto;
}

.flexbox .container .col {
  flex: 1;
  padding: 1rem;
}

@media screen and (max-width: 48rem) {
    .flexbox .container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        flex-flow: column;
    }
}

Nhớ thêm .flexbox vào các quy tắc cho từng cột nếu bạn đã hoàn tất bước 5.3 không bắt buộc.

Lưu mã và làm mới index.html trong trình duyệt. Trang này sẽ trông giống như trước đây, nhưng giờ đây, trang này hoạt động tốt trong mọi trình duyệt trên mọi thiết bị. Nếu có một trình duyệt không hỗ trợ Flexbox, bạn có thể kiểm thử các quy tắc dự phòng bằng cách mở index.html trong trình duyệt đó.

Thông tin khác

Bạn đã học được cách tạo kiểu cho nội dung để nội dung đó có khả năng thích ứng. Bằng cách sử dụng các truy vấn nội dung nghe nhìn, bạn có thể thay đổi bố cục nội dung dựa trên kích thước cửa sổ hoặc màn hình của thiết bị mà người dùng đang dùng.

Nội dung đã đề cập

  • Đặt khung hiển thị trực quan
  • Flexbox
  • Truy vấn về nội dung nghe nhìn

Tài nguyên

Tìm hiểu thêm về những điều cơ bản của thiết kế thích ứng

Tìm hiểu thêm về Flexbox như một tính năng nâng cao tăng dần

Tìm hiểu về các thư viện cho CSS đáp ứng

Tìm hiểu thêm về cách sử dụng truy vấn nội dung nghe nhìn

Để xem tất cả các lớp học lập trình trong khoá đào tạo PWA, hãy xem Lớp học lập trình chào mừng cho khoá học này/