Làm sao để cho website hiển thị Responsive? [NEW]



Trong khi tôi có gắn khung tiếp nhận ý tưởng viết bài theo yêu cầu với độc giả, trong đó 7% yêu cầu viết bài liên quan đến giao diện website hiển thị ở dạng Responsive. Từ đó, tôi nhận thấy rằng nhiều bạn đọc ở đây vẫn chưa hiểu làm thế nào để một giao diện website có thể hiển thị được Responsive nên trong bài viết này tôi sẽ giải thích và hướng dẫn các bạn áp dụng Responsive cho website của mình. tôi.

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

Bài này mình chỉ nói sơ qua về Responsive nên những kiến ​​thức cơ bản mình sẽ không nói đến nên các bạn cần chuẩn bị kiến ​​thức nhé. HTML và CSS cơ bản để được hiểu đầy đủ.

Đáp ứng là gì?

Làm sao để cho website hiển thị Responsive? [NEW]

Phản ứng nhanh nhẹn là tính từ để chỉ một trang web có thể hiển thị trên mọi kích thước hiển thị của các trình duyệt. Ví dụ, nếu giao diện website đặt chiều rộng cố định là 800px thì chắc chắn nếu xem trên trình duyệt di động mà chiều rộng chỉ từ 320px – 420px sẽ không hiển thị hết.

Bạn có thể nghĩ rằng chúng tôi có thể gán giá trị chiều rộng từ tuyệt đối (800px) cho một loại giá trị tương đối là tỷ lệ phần trăm (%) và nó sẽ được hiển thị tương ứng. Điều này cũng đúng, nhưng giả sử trang web của bạn có 3 cột liên tiếp, liệu rằng trên trình duyệt di động, mắt người có thể nhìn thấy chi tiết mà không cần phóng to màn hình? Do đó, chúng ta sẽ muốn giao diện hiển thị khác một chút trên các trình duyệt nhỏ hơn so với các trình duyệt bình thường, và Responsive là giải pháp nhanh nhất và dễ dàng nhất để thực hiện điều này.

Đáp ứng hoạt động bởi chúng tôi sẽ viết CSS để cho phép 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. Ví dụ: bạn có thể đặt một đoạn CSS nhất định chỉ áp dụng cho các trình duyệt 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 xử lý từ phía máy khách và không gửi bất kỳ truy vấn nào đến máy chủ để xử lý (phía máy chủ), vì vậy nó có nhược điểm là khiến trình duyệt của bạn phải CSS mất nhiều thời gian hơn để xử lý.

Vậy làm thế nào để áp dụng Responsive vào giao diện website?

Để làm cho trang web của bạn đáp ứng, chúng tôi có hai bước như sau:

Bước 1. Khai báo meta khung nhìn

Trước tiên, bạn cần đặt thẻ này ở trên ghép nối trong mã HTML của trang web của bạn.

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

meta viewport có nghĩa là một tập hợp thẻ để trình duyệt hiển thị so với kích thước màn hình. Chẳng hạn như ví dụ trên, có nghĩa là bạn sẽ đặt 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 trên chiều rộng thiết bị (device-width) và không cho phép người dùng thu phóng (đặt quy mô ban đầu thành giá trị cố định là 1). Đây là thẻ tôi khuyên bạn nên sử dụng cho tất cả các dự án Đáp ứng.

Ngoài ra, thẻ meta chế độ xem này có các giá trị như:

  • bề rộng: thiết lập chiều rộng của khung nhìn.
  • chiều rộng thiết bị: Chiều rộng cố định của thiết bị.
  • Cao: thiết lập chiều cao của khung nhìn.
  • chiều cao thiết bị: Chiều cao cố định của thiết bị.
  • quy mô ban đầu: Đặt mức thu phóng ban đầu, giá trị là 1 có nghĩa là không thu phóng và khi giá trị được đặt, người dùng không thể phóng to vì nó đã được cố định.
  • quy mô tối thiểu: Mức thu phóng tối thiểu của thiết bị với trình duyệt.
  • quy mô tối đa: Mức thu phóng tối đa của thiết bị với trình duyệt.
  • người dùng có thể mở rộng: Cho phép người dùng phóng to, giá trị là có hoặc không.

Tại sao sử dụng meta khung nhìn? Hãy xem ví dụ về nội dung có chế độ xem meta và không có chế độ xem meta.

responsive-without-metaviewport

responsive-with-metaviewport

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

Ngay tại bước này, chúng ta sẽ tiến hành viết 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ường chúng ta chỉ viết dựa trên chiều rộng và được tính theo đơn vị pixel. Nhiều người có thể tính toán dựa trên các đơn vị như em, rem, DPI, phần trăm,… nhưng nếu bạn là người mới thì cứ dùng pixel cho dễ.

Để viết CSS tương ứng cho chiều rộng trình duyệt, chúng tôi sẽ sử dụng thẻ truy vấn @media trong CSS3 (truy vấn @media) như thế này:


body {
background: #fff;
color: 333;
}

@media all and (max-width: 320px) {
body {
background: #e7e7e7;
}
}

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

Trong đoạn văn trên, đoạn @media all and (max-width: 320px) tức là đặt 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 chiều rộng của màn hình iPhone. Và các đoạn CSS bên trong truy vấn này sẽ được thực thi khi màn hình trình duyệt thu nhỏ xuống kích thước 320px trở xuống.

Ngoài ra, bạn cũng có thể đặt thêm các điều kiện khác như:

@media only screen and (min-width: 320px) and (max-width: 860px) {…}

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

Về giá trị của loại phương tiện và tính năng phương tiện trong truy vấn @media, bạn có thể tham khảo W3Schools để biết thêm thông tin đầy đủ, nhưng thông thường chúng tôi chỉ viết CSS cho loại phương tiện vì các tính năng của màn hình và phương tiện chỉ ở mức tối thiểu, tối đa. -chỉ độ rộng.

Làm thế nào để kiểm tra Responsive?

Khi làm việc, bạn có thể kiểm tra Responsive bằng cách điều chỉnh kích thước trình duyệt theo cách thủ công nhưng nó không được “thông minh” cho lắm. Nhưng tôi sẽ khuyến khích các bạn sử dụng các công cụ hỗ trợ để kiểm thử, một trong những công cụ kiểm tra Responsive yêu thích của tôi là Resizer, rất dễ sử dụng và nhỏ gọn. Xem cách sử dụng nó bằng hình ảnh bên dưới:

chỉnh lại

Danh sách kích thước màn hình thiết bị

Khi viết CSS cho giao diện Responsive, điều quan trọng nhất là bạn phải hiểu kích thước màn hình của các điện thoại phổ thông để có thể viết CSS như mong muốn và đảm bảo nó hoạt động tốt trên nhiều thiết bị, đặc biệt là các thiết bị phổ thông.

Bạn có thể tham khảo kích thước chiều rộng thiết bị tại đây, nhưng trong hầu hết các dự án, bạn chỉ cần tạo các điểm ngắt CSS như sau:

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

Cấu trúc CSS mẫu của một chủ đề Responsive điển hình

/* Các CSS này dành cho toàn bộ website và desktop */
body {
background: #fff;
color: 333;
}

/* Dành cho điện thoại */
@media all and (max-width: 480px) {

}

/* Dành cho máy tính bảng */
@media all and (max-width: 1024px) {

}

Khái niệm Mobile-First

ưu tiên di động

Khi nói về việc tạo giao diện Responsive, bạn cũng cần biết đến khái niệm Mobile-first vì nó sẽ giúp quá trình tạo giao diện Responsive của bạn nhanh hơn rất nhiều. Mobile-first có nghĩa là tên của một quy trình thiết kế, nơi chúng tôi sẽ bắt đầu thiết kế giao diện trên điện thoại trước tiên và sử dụng điện thoại làm nền tảng ban đầu, sau đó chuyển sang các thiết bị khác như máy tính bảng, máy tính để bàn, retina,…

Đặc điểm của quy trình ưu tiên trên thiết bị di động là chúng tôi chỉ sử dụng các tính năng của phương tiện chiều rộng tối thiểu và không sử dụng gì khác. Tôi có một ví dụ sau:

@media all and (min-width: 320px) {
body {
background: #e7e7e7;
color: #333333;
}
}

Đ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 CSS bên trong, tất nhiên nó cũng sẽ bao gồm máy tính bảng, máy tính để bàn, v.v.

Và khi sử dụng quy trình ưu tiên trên thiết bị di động, CSS của bạn sẽ trông giống như sau:

/* Dành cho điện thoại */
@media all and (min-width: 320px) {…<span style="line-height: 1.5;">}</span>

/* Dành cho máy tính bảng chiều dọc */
@media all and (min-width: 600px) {…}

/* Dành cho máy tính bảng chiều ngang */
@media all and (min-width: 1024px) {…}

/* Dành cho màn hình desktop */
@media all and (min-width: 1280px) {…}

Vậy tại sao bạn nên sử dụng thiết bị di động trước tiên? Có nhiều lý do như:

  • Tập trung vào giao diện trên điện thoại nhiều nhất có thể vì xu hướng sử dụng điện thoại ngày càng nhiều.
  • Tránh viết lại CSS, vì CSS di động có thể được sử dụng lại trên máy tính để bàn. Nhưng nếu bạn viết CSS trên desktop trước thì trong giao diện di động bạn vẫn phải viết lại nếu muốn tùy chỉnh.
  • Dễ dàng triển khai và quản lý, nâng cấp sau này.
  • Tránh lỗi hiển thị trên điện thoại do tùy chỉnh từ CSS trên máy tính để bàn.
  • Và nhiều lý do khác mà chỉ khi làm mới biết.

Một số kiến ​​thức cần biết khi viết CSS Responsive

  • Ngoài đơn vị điểm ngắt là px, đơn vị độ dài trong trang web phải là phần trăm. Hay đúng hơn sử dụng đơn vị tương đối.
  • Nên sử dụng max-width thay vì width để tránh chiều rộng cố định.
  • Sử dụng display: none cho các phần tử cần ẩn trên mỗi thiết bị mà bạn muốn ẩn. Và hiển thị: chặn trên các thiết bị cần hiển thị.
  • Sử dụng tùy chọn! Important nếu bạn cần ghi đè CSS.

Về cơ bản chỉ có vậy thôi, thực ra Responsive chỉ là phần căng thẳng nhất trong menu, nhưng khi thực hành bạn sẽ hiểu chi tiết hơn.

Phần kết

Trong bài viết này, tôi đã trình bày chi tiết về khái niệm Responsive và cách triển khai một giao diện Responsive. Bây giờ bạn có thể thực hành bằng cách tạo một tệp HTML đơn giản, khai báo thẻ meta khung nhìn và sau đó cố gắng viết CSS để hiểu rõ hơn về cách hoạt động của nó.

Hi vọng trong thời gian tới mình sẽ có bài hướng dẫn làm giao diện website HTML Responsive hoàn chỉnh để các bạn có thể tự thực hành. Và khi bạn đã thành thạo cách làm giao diện Responsive thì việc làm một theme WordPress hỗ trợ Responsive không còn là điều quá khó khăn nữa. Mọi thứ sẽ được trình bày từ từ.

5/5 – (1 phiếu bầu)