Cách thiết kế web responsive là một trong những keyword được search nhiều nhất trên Google về chủ đề cách thiết kế web responsive. Trong bài viết này, cachthietkeweb.vn sẽ viết bài viết Tổng hợp cách thiết kế web responsive mới nhất 2020.
Tổng hợp cách thiết kế web responsive mới nhất 2020
Responsive web design là gì?
Responsive web thiết kế (Thiết kế website tương like di động) là phương pháp bạn thiết lập một web cung cấp 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 to, nhỏ hay máy tính (desktop). Với cách thức này, trải nghiệm của user trên mỗi thiết bị sẽ gia tăng rõ rệt. Chẳng hạn, trên khung ảnh của ĐT, mọi thứ vẫn hiển thị rõ ràng, đầy đủ và tinh tế hơn.
chính mình khái niệm Responsive web design được Ethan Marcotte mang ra trong quyển sách “Responsive website 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 đáp ứng các khung ảnh tiêu chuẩn:
FoodSense là một web đẹp đủ sức hiển thị tốt trên all khung hình thiết bị di động lẫn desktop.
Phân biệt Responsive website thiết kế và thích ứng với Mobile
Mặc dù cả Responsive web thiết kế và thích nghi với Mobile (Adaptive Mobile) đều có phương pháp giải quyết khá giống nhau, và cùng cải thiện bố cục website ở một thời điểm khung hình có click thước nào đó, chúng vẫn có những sự khác nhau.
Responsive được hiểu là gấp rút cải thiện và thích 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 đủ sức hoạt động và cải tiến thường xuyên bố cục, chẳng hạn giống như khi chiều dài lẫn chiều rộng cửa sổ cải thiện, trong khi Adaptive sẽ chỉ thay đổi trên các group yếu tố khái niệm sẵn, gợi ý 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à suôn sẻ.
phù hợp đó, trên các ĐT 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 khó khăn, 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ải tiến phải sử dụng trên cả hai giao diện.
hiện giờ, kĩ thuật đa dạng nhất là dùng Responsive website thiết kế. Nó đem lại đủ cả ba yếu tố: responsive, adaptive và mobile.
mẹo xây dựng Responsive web design
Để hoàn thành kĩ thuật xây dựng Responsive web thiết kế, bạn cần nắm ba phần quan trọng:
- Bố cục linh hoạt
- Media Queries
- Media linh động
Phần 1: Bố cục linh động
Phần nào bao gồm công thức xây dựng bố cục không khó khăn nhưng linh hoạt, có thể resize chiều dài (width) tới bất kỳ khung ảnh nào. Các lưới linh hoạt này được thiết lập trên các tổ chức tính, hầu hết nên sử dụng tỷ lệ (%), chẳng hạn cột có độ rộng là 25%, và tổ chức em (để xây dựng khoảng phương pháp giữa các cột). Các tổ chức này thường được dùng để khai báo các thuộc tính của lưới (grid) giống như chiều rộng, lề hai bên, và lề bên trong.
ngược lại với hướng dẫn viết CSS cũ, mẹo viết này yêu cầu bạn nên dùng số sim linh động, TRÁNH dùng các tổ chức truyền thống giống như pixel hay inch. Bởi vì sự thay đổi của khung màn ảnh liên tục dẫn tới sự thích ứng của bố cục web cần cải thiện 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;/* lớn make it responsive when needed */.sidebar width:25%;.content width:75%;
Để tạo ra khoảng cách giữa các phân khúc, bạn nên dùng padding.
.sidebar width:25%;padding:01em;.content width:75%;padding:01em;
Để bù lại khoảng phương pháp này, phân khúc cha của cả hai phân khúc con nên 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ông giống nhau, chẳng hạn như giới hạn tối đa của bố cục, ta thường dùng .container bên trong:
.container width:100%;max-width:70em;margin:0auto;/* Center alignment */padding:01em;
gợi ý về layout container:
Phần 2: Media Queries
Media Queries được xây dựng như một hướng dẫn xây dựng rộng các đối tượng. Nó giúp chúng ta đặt các kiểu style khác nhau cho thị trường trên các trình duyệt và tỷ lệ khung ảnh không giống nhau.
phương thức sử dụng Media Queries
Có một vài phương pháp bạn có thể 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ông giống nhau vào qua HTML.
Chẳng hạn, bạn có thể gắn giống như thế này trong thẻ
của web để áp dụng file phong cách cho khung ảnh cụ thể nào đó:
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) tất cả and(max-width:1024px)...
Trong file SCSS, bạn có thể nhập lồng vào trong khung giống 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 dùng phù hợp các điều kiện trong Media Queries giúp truy vấn vào các khung màn ả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 phân khúc được đặt cho khung từ 0 đến 320px (hoặc 480px, tuỳ theo từng project), và được ghi đè ở các khung to hơn.
| // SCSS | |
| $mobile-breakpoint: 320px; | |
| $tablet-breakpoint: 1024px; | |
| .menu-item | |
| // Mobile value | |
| width: 100%; | |
| @media (min-width: $mobile-breakpoint) | |
| width: 50phần trăm; | |
| @media (min-width: $tablet-breakpoint) | |
| width: 33.33%; | |
ĐA KHUNG ảnh khó khăn
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 đó, gợi ý từ 800px đến 1024px, thì ta có thể sử dụng điều kiện and:
@media tất cả and(min-width:800px)and(max-width:1024px)...
trái lại, nếu ở một khung hình nào đó ta k 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ẽ dùng not:
@medianot screen and(color)...
dùng “only” sẽ k hỗ trợ trên các trình duyệt dùng HTML4, bởi vậy code gợi ý giống như dưới đây sẽ k đượ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 phương pháp xử lý bằng Javascript gồm có Respond.js và CSS3-MediaQueries.js.
ViewPort
Các thiết bị di động thường phân phối phần support cho người dùng khi duyệt web, chẳng hạn giống 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.
Nếu bạn k 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.
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 web trên trình duyệt di động, bạn đủ sức dùng các tính chất dưới đây:
- minimum-scale
- maximum-scale
- initial-scale
- user-scalable
Thông thường, initial-scale sẽ có trị giá là 1. Nó có thể nhận các trị giá là số nguyên từ 0 đến 10.
Viewport Resolution
name="viewport"nội dung="target-densitydpi=device-dpi">
Các trị giá có thể thay thế:
- device-dpi
- high-dpi
- medium-dpi
- low-dpi
- (một số dpi nào đó)
dùng giá trị điểm ảnh là rất hiếm hoi, nhưng nó sẽ rất cần nếu bạn mong muốn sử dụng website bằng thư viện hì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 thị trường media được giải quyết trong Responsive website thiết kế. Khi khung hình cải thiện, không phải lúc nào media cũng sẽ thêm vào. pic, video hay audio phải có mức độ cải thiện kích thước cũng như % thì mới cung cấp tiêu phù hợp Responsive web.
Một cách mau 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 đủ sức xem gợi ý sau:
tuy vậy, chẳ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 % khung hình phù hợp. 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ó luôn luôn cần là 16/9 đúng không?
Để làm điều này, ta cần dùng CSS Aspect ratio giống như đoạn code mẫu sau:
class="media__figure">class="media__iframe"src="https://www.youtube.com/embed/4Fqg43ozz7A">
.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 easy để làm quen với Responsive website thiết kế 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, văn hóa về Responsive của bạn phải thật hiển nhiên. Hi vọng post này sẽ làm bạn hiểu và áp dụng nó chuẩn xác hơn.
nguồn: codetot.net
