Hướng dẫn cách làm responsive website mới nhất 2020

Cách làm responsive website là một trong những từ khóa được search nhiều nhất về chủ đề cách làm responsive website . Trong bài viết này, lamweb.vn sẽ viết bài viết  Hướng dẫn cách làm responsive website mới nhất 2020

Hướng dẫn cách làm responsive website mới nhất 2020

Yêu cầu kiến thức

Trong bài này mình chỉ nói qua Responsive nên các văn hóa cơ bản mình sẽ k nói qua, do vậy bạn cần sẵn sàng kiến thức HTML và CSS căn bản để đủ nội lực hiểu được trọn vẹn.

Responsive là gì?

Responsive là một tính từ để chỉ một web đủ sức hiển thị tương like trên mọi kích thước hiển thị của trình duyệt. ví dụ thông thường nếu giao diện web đặt một chiều rộng cố định là 800px thì hiển nhiên nếu nhìn thấy ở trình duyệt điện thoại với chiều ngang chỉ từ 320px – 420px sẽ k hiển thị hết được.

đủ nội lực bạn cho rằng chúng ta có thể gán trị giá chiều rộng từ tuyệt đối (800px) sang kiểu trị giá tương đối là tỷ lệ (%) thì đủ sức sẽ hiển thị tương ứng được. Điều này cũng đúng, nhưng giả sử web bạn có 3 cột trên một hàng thì liệu rằng trên trình duyệt di động, mắt thường của con người có thể thấy chi tiết mà k cần phóng to màn ảnh hay không? thành ra, chúng ta sẽ mong muốn giao diện sẽ được hiển thị không giống đi một xíu trên trình duyệt nhỏ hơn các trình duyệt thông thường, và Responsive là giải pháp làm việc này mau nhất và easy nhất.

Responsive hoạt động bằng cách chúng ta sẽ vạch CSS để cho trình duyệt hiểu và thực thi nó trên các kích thước trình duyệt nhất định. Chẳng hạn bạn có thể xây dựng một đoạn CSS nào đó chỉ vận dụng cho các trình duyệt có click thước chiều rộng tối đa là 320px (điện thoại). Điều này có nghĩa là Responsive là một kỹ thuật thiết kế được giải quyết từ client-side chứ không hề send truy vấn nào đến máy chủ để xử lý (server-side) nên nó có một nhược điểm là làm trình duyệt của bạn phải mất nhiều thời gian hơn để xử lý CSS.

Xem thêm : Tổng hợp thuật toán google panda mới nhất 2020

Vậy làm sao để ứng dụng Responsive lên giao diện website?

Để cho web của bạn trở thành Responsive, chúng ta có hai bước như sau:

Bước 1. Khai báo meta viewport

trước hết bạn cần đặt thẻ này vào cặp

trên trong mã HTML của web.

meta viewport nghĩa là một thẻ thiết lập cho trình duyệt hiển thị tương ứng với kích thước màn ảnh. Chẳng hạn như ví dụ trên, có nghĩa là bạn sẽ thiết lập trình duyệt hiển thị cố định và tương ứng trên tất cả các thiết bị dựa vào chiều rộng của thiết bị (device-width) và k cho phép user phóng to (thiết lập initial-scale với giá trị cố định là 1). Đây là thẻ mình khuyên rằng bạn sử dụng cho toàn bộ các dự án Responsive.

bên cạnh đó thẻ meta viewport này còn có các trị giá như:

• width: xây dựng chiều rộng của viewport.
• device-width: Chiều rộng cố định của thiết bị.
• height: xây dựng chiều cao của viewport.
• device-height: Chiều cao cố định của thiết bị.
• initial-scale: xây dựng mức phóng lớn lúc ban đầu, trị giá là 1 nghĩa là không phóng lớn, và khi trị giá được xây dựng thì user không thể phóng lớn vì nó vừa mới được cố định.
• minimum-scale: Mức phóng lớn tối thiểu của thiết bị với trình duyệt.
• maximum-scale: Mức phóng lớn tối đa của thiết bị với trình duyệt.
• user-scalable: Cho phép người dùng phóng to, giá trị là yes hoặc no.

tại sao lại sử dụng meta viewport? Hãy cứ nhìn thấy gợi ý của một content có meta viewport và không có meta viewport nhé.

Bước 2. viết CSS cho chiều rộng của thiết bị

Ngay tại bước này, chúng ta sẽ tiến hành vạch CSS tương ứng cho từng mức chiều rộng hoặc chiều cao của thiết bị, thường thì chúng ta chỉ viết dựa theo chiều rộng và được tính trên đơn vị là pixel. Nhiều người có thể tính dựa trên đơn vị là em, rem, DPI, %,…nhưng nếu bạn là người mới thì cứ sử dụng pixel cho dễ nhé.

Để vạch CSS tương ứng cho chiều rộng của trình duyệt, chúng ta sẽ sử dụng thẻ truy vấn @media trong CSS3 (@media query) giống như sau:

Điều này có nghĩa là web của bạn mặc định sẽ có nền (background) màu trắng, nhưng khi thu nhỏ trình duyệt xuống còn từ 0px đến 320px thì nó sẽ có nền là màu xám với mã màu #e7e7e7.

Trong đoạn trên, đoạn @media toàn bộ and (max-width: 320px) nghĩa là xây dựng breakpoint cho toàn bộ thiết bị (all – media type) và có chiều rộng cố định tối đa là 320px (max-width – media features), 320px tương ứng với click thước chiều rộng của màn ảnh iPhone. Và các đoạn CSS nằm bên trong query này sẽ được thực thi khi co màn trình duyệt lại đúng với click thước từ 320px trở xuống.

bên cạnh đó, bạn cũng đủ sức thiết lập thêm nhiều điều kiện như:

Tức là query này sẽ chỉ ứng dụng cho màn ảnh desktop, máy tính bảng, điện thoại thông minh và có kích thước màn ảnh tối thiểu là 320px nhưng nhỏ hơn 860px.

Về các giá trị của media type và media features trong @media query, bạn đủ sức tham khảo thêm tại W3Schools cho đầy đủ hơn nhưng thông thường ta cứ viết CSS cho media type là screen và media features chỉ quanh quẩn min-width, max-width mà thôi.

Xem thêm : Hướng dẫn thiết kế web mobile mới nhất 2020

làm sao rà soát Responsive?

Khi làm việc, bạn có thể test Responsive bằng phương pháp co giãn click thước trình duyệt thủ công nhưng nó không được “thông minh” cho lắm. Mà mình sẽ khuyên rằng các bạn dùng các tool hỗ trợ để rà soát, một trong những tool kiểm tra Responsive mà mình thích nhất đó là Resizer, rất dễ dùng và gọn nhẹ. Hãy nhìn thấy mẹo sử dụng bằng ảnh dưới:

danh mục các click thước màn ảnh thiết bị

Khi viết CSS cho giao diện Responsive, việc cần thiết nhất là bạn phải nắm được kích thước màn hình của các loại điện thoại đa dạng để có thể vạch CSS được giống như ý và hiển nhiên nó hoạt động tốt trên nhiều thiết bị, nhất là các thiết bị phổ biến.

Bạn có thể xem qua các size chiều rộng của các thiết bị tại đây, nhưng đa phần một dự án bạn chỉ cần tạo các breakpoint CSS như sau:

• max-width: 320px (điện thoại di động, hiển thị chiều dọc)
• max-width: 480px (điện thoại di động, hiển thị chiều ngang)
• max-width: 600px (máy tính bảng, hiển thị chiều dọc)
• max-width: 800px (máy tính bảng, hiển thị chiều ngang)
• max-width: 768px (máy tính bảng loại to, hiển thị chiều dọc)
• max-width: 1024px (máy tính bảng loại lớn, hiển thị chiều ngang)
• min-width: 1025px (từ size này trở lên là danh cho desktop thông thường).

gợi ý cấu trúc CSS của một giao diện Responsive thông thường

khái niệm Mobile-First

Khi nói về làm giao diện Responsive thì bạn cũng cần nên biết qua định nghĩa Mobile-first vì nó sẽ làm quy trình sử dụng giao diện Responsive của bạn mau hơn rất nhiều. Mobile-first nghĩa là tên một quy trình thiết kế mà chúng ta sẽ khởi đầu design cho giao diện ở ĐT trước và dùng điện thoại sử dụng nền tảng ban đầu, sau đó sẽ đến các thiết bị khác như máy tính bảng, desktop, retina,…

Đặc điểm của quy trình mobile-first là chúng ta chỉ dùng media features là min-width chứ không sử dụng cái gì không giống. Mình có gợi ý sau:

Điều này có nghĩa là các thiết bị có chiều rộng tối thiểu là 320px sẽ áp dụng các CSS bên trong, tất nhiên nó cũng sẽ gồm có luôn giao diện máy tính bảng, desktop,…

Và khi dùng quy trình mobile-first thì CSS của bạn sẽ có cấu trúc thế này:

Thế tại sao lại nên sử dụng mobile-first? Có rất nhiều nguyên do như:

• hội tụ tối đa vào giao diện ở ĐT vì xu hướng dùng ĐT ngày càng tăng trưởng.
• Tránh việc vạch lại CSS, vì một CSS ở ĐT đủ sức được tái sử dụng trên desktop. Nhưng nếu bạn vạch CSS trên desktop trước thì ở giao diện điện thoại bạn luôn luôn phải vạch lại nếu mong muốn tùy biến.
• không khó khăn trong việc khai triển và thống trị, nâng cấp sau này.
• Tránh các lỗi hiển thị trên điện thoại do việc tùy biến từ CSS ở desktop.
• Và nhiều nguyên do không giống mà chỉ khi sử dụng mới biết.

Một số kiến thức cần biết khi vạch CSS Responsive

• Ngoài tổ chức của breakpoint là px, thì các tổ chức đo chiều dài trong website nên là %. Hay nói đúng hơn là dùng đơn vị tương đối.
• Nên dùng max-width thay vì width để tránh cố định chiều rộng.
• sử dụng display: none cho các yếu tố cần ẩn đi ở từng thiết bị mà bạn mong muốn ẩn. Và display: block ở các thiết bị cần hiển thị ra.
• sử dụng tùy chọn !important nếu cần đè vạch đè CSS.

Cơ bản là chỉ vậy thôi, thực ra Responsive thì chỉ căng nhất là phần sử dụng thực đơn nhưng khi thực hành bạn sẽ nắm rõ chi tiết hơn.

Lời kết

Trong bài này mình vừa mới nói chi tiết qua định nghĩa Responsive và hướng dẫn khai triển một giao diện Responsive là như thế nào. cho đến nay bạn có thể thực hành bằng cách tạo một tập tin HTML đơn giản, rồi khai báo thẻ meta viewport rồi thử viết CSS để nắm rõ hơn về phương pháp hoạt động của nó nhé.

Hy vọng trong tương lai, mình sẽ có một tutorial sử dụng một giao diện web HTML dạng Responsive hoàn chỉnh để bạn đủ nội lực tự thực hành. Và khi mà bạn vừa mới nắm được cách làm một giao diện Responsive rồi thì việc làm theme WordPress hỗ trợ Responsive k còn quá chông gai nữa. Mọi thứ sẽ được mình trình bày từ từ.

Nguồn : https://thachpham.com