Điểm bài viết
[Tổng cộng: 21 Trung bình: 4.2]
Bạn đang đọc: Responsive Web Design toàn tập từ A đến Z – Code Tốt
Với số lượng người dùng những thiết bị mobile, tablet với những kiểu khung hình khác nhau, câu hỏi đặt ra là làm thế nào để tăng năng lực thưởng thức tốt nhất cho website của bạn. Responsive Web Design sẽ là câu vấn đáp 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ề phương pháp một website cung ứng những khung hình tiêu chuẩn :
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 giải quyết và xử lý khá giống nhau, và cùng biến hóa bố cục tổng quan website ở một thời gian khung hình có kích cỡ nào đó, chúng vẫn có những sự khác nhau .
Responsive được hiểu là nhanh gọn đổi khác và tương thích với hầu hết những biến hóa, trong khi Adaptive có nghĩa là thuận tiện sửa đổi cho những mục tiêu, trường hợp đơn cử .
Responsive hoàn toàn có thể hoạt động giải trí và update liên tục bố cục tổng quan, ví dụ điển hình như khi chiều dài lẫn chiều rộng hành lang cửa số biến hóa, trong khi Adaptive sẽ chỉ đổi khác trên những nhóm yếu tố định nghĩa sẵn, ví dụ khung 480 px, khung 1024 px .
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 giải trí thướt tha trơn tru .
Thêm vào đó, trên những đ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 thay thế, bảo dưỡng là rất phức tạp, mặc dầu giao diện trên mobile hoàn toàn có thể nhẹ, nhưng lại cần bạn mỗi lần tăng cấp, update 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
Để triển khai xong kĩ năng xây dựng Responsive Web Design, bạn cần nắm ba phần quan trọng :
- Bố cục linh hoạt
- Media Queries
- Media linh hoạt
Phần 1: Bố cục linh hoạt
Phần nào gồm có phương pháp xây dựng bố cục tổng quan đơn thuần nhưng linh động, hoàn toàn có thể resize chiều dài ( width ) tới bất kể khung hình nào. Các lưới linh động này được xây dựng trên những đơn vị chức năng tính, hầu hết nên sử dụng Tỷ Lệ ( % ), ví dụ điển hình cột có độ rộng là 25 %, và đơn vị chức năng em ( để tạo ra khoảng cách giữa những cột ). Các đơn vị chức năng này thường được sử dụng để khai báo những 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 tổng quan 1 cột bên, ta có những đối tượng người tiêu dù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 những đối tượng người dù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 người dùng cha của cả hai đối tượng người tiêu dùng con nên sử dụng margin âm :
.wrapper {
display: flex;
flex-wrap: wrap;
margin: 0 -1em;
}
Để tạo những bố cục tổng quan với độ rộng khác nhau, ví dụ điển hình như số lượng giới hạn tối đa của bố cục tổng quan, 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ề layout container :
See the Pen Flexible Grid by Shay Howe (@shayhowe) on CodePen.
Phần 2: Media Queries
Media Queries được xây dựng như một cách lan rộng ra những đối tượng người tiêu dùng. Nó giúp tất cả chúng ta đặt những kiểu style khác nhau cho đối tượng người dùng trên những trình duyệt và tỷ suất khung hình khác nhau .
Cách thức sử dụng Media Queries
Có một vài cách bạn hoàn toà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ẻcủa website để áp dụng file style cho khung hình cụ thể nào đó:
Hoặc trong file CSS style của website, bạn thêm những 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 hoàn toà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ài hòa và hợp lý những điều kiện kèm theo trong Media Queries giúp truy vấn vào những khung màn hình hiển thị khác nhau hoạt động giải trí 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.js và CSS3-MediaQueries.js.
ViewPort
Các thiết bị di động thường cung ứng phần tương hỗ cho người dùng khi duyệt web, ví dụ điển hình như thu phóng và độ phân giải của web. Apple đã ý tưởng ra cách sử dụng thẻ meta để thực thi điều này .
Nếu bạn không sử dụng thẻ , 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 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 hoàn toàn có thể sử dụng những 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ó hoàn toàn có thể nhận những giá trị là số nguyên từ 0 đến 10 .
Viewport Resolution
Các giá trị hoàn toàn có thể thay thế sửa chữa :
- 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 ví dụ điển hình .
Media linh hoạt
Cuối cùng, nhưng không kém phần quan trọng, là cách những đối tượng người tiêu dùng truyền thông được giải quyết và xử lý trong Responsive Web Design. Khi khung hình đổi khác, không phải khi nào truyền thông cũng sẽ tương thích. Hình ảnh, video hay audio cần phải có năng lực đổi khác kích cỡ cũng như tỷ suất thì mới cung ứ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 hoàn toàn có thể xem ví dụ sau :
See the Pen Flexible Media by Shay Howe (@shayhowe) on CodePen.
Tuy vậy, không phải khi nào nó cũng hiển thị tuyệt vời, và đặc biệt quan trọng là khi bạn cần tỷ suất khung hình chuẩn. Chẳng hạn, video HD 16 : 9 thì bất kể độ rộng màn hình hiển thị 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 :
.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
Nguồn: Code Tốt
Xem thêm: Hướng dẫn các bước xây dựng website bán hàng trực tuyến hiệu quả
Source: https://migoda.vn
Category: SEO Website