Trong lúc mình có gắn cái khung nhận ý tưởng viết bài theo yêu cầu có độc giả, thì trong đó có tới 7% yêu cầu viết bài liên quan đến việc làm cho trang web giao diện hiển thị theo dạng Responsive. Từ đó mình nhận thấy có rất nhiều độc giả ở đây vẫn chưa nắm bắt được cách một website giao diện có thể hiện Responsive là như thế nào nên trong bài này mình sẽ giải thích và hướng dẫn các bạn áp dụng Responsive vào website của mình
Yêu cầu kiến thức
Trong bài này mình chỉ nói qua Responsive nên kiến thức cơ bản mình sẽ không nói qua, vậy bạn cần chuẩn bị kiến thức cơ bản HTML và CSS căn bản để có thể hiểu được là Trâu bò
Responsive là gì?
Responsive là một tính từ để chỉ một trang web có thể hiển thị tương thích 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 trang web giao diện đặt chiều rộng cố định là 800px thì chắc chắn rằng nếu xem qua trình duyệt điện thoại với chiều ngang chỉ từ 320px – 420px sẽ không hiển thị hết được.
Bạn có thể cho rằng chúng ta có thể chỉ định giá trị chiều rộng từ tuyệt đối [800px] sang loại giá trị tương đối là phần trăm [%] thì có thể hiển thị tương ứng được không. Điều này cũng đúng, nhưng giả sử trang web của 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à không cần phóng to màn hình hay không?
Hoạt động đáp ứng bằng cách 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 duyệt tốt nhất. Chẳng hạn, bạn có thể thiết lập một đoạn CSS bất kỳ mà chỉ áp dụng cho các trình duyệt có kích 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ế kỹ thuật được xử lý từ phía máy khách chứ không phải gửi bất kỳ truy vấn nào đến máy chủ để xử lý [phía máy chủ] nên nó xử lý có một nhược điểm là làm trình duyệt của bạn phải không?
Vì sao phải làm thế nào để áp dụng Responsive lên giao diện trang web?
Để trang web của bạn trở thành Responsive, chúng ta có hai bước như sau
Bước 1. Khai báo chế độ xem meta
Trước tiên bạn cần đặt thẻ này vào cặp trên trong mã HTML của website.
meta viewport có nghĩa là thẻ thiết lập cho trình duyệt hiển thị tương ứng 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ẽ 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 trên chiều rộng của thiết bị [device-width] và không cho phép người dùng phóng to [ . Đây là thẻ mình khuyến mãi bạn sử dụng cho toàn bộ các dự án Responsive
Ngoài thẻ meta viewport này còn có các giá trị như
- bề rộng. setting width of viewport
- chiều rộng thiết bị. Định nghĩa chiều rộng của thiết bị
- Chiều cao. setting chiều cao của viewport
- chiều cao thiết bị. Chiều cao cố định của thiết bị
- quy mô ban đầu. Thiết lập mức độ phóng to lúc ban đầu, giá trị là 1 nghĩa là không phóng to, và khi giá trị được thiết lập, người dùng không thể phóng to vì nó đã được định sẵn
- quy mô tối thiểu. Zoom to minimum of device with browser
- quy mô tối đa. Độ phóng to 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, value is yes or no
In sao lại sử dụng chế độ xem meta?
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 viết CSS tương ứng với từng mức độ rộng hoặc chiều cao của thiết bị, thông thường thì chúng ta chỉ viết dựa trên chiều rộng và được tính trên đơn vị là pixel. Nhiều người có thể tính toán dựa trên đơ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ễ nhé.
Để viết CSS tương ứng với chiều rộng của trình duyệt, chúng ta sẽ sử dụng thẻ truy vấn
3 trong CSS3 [@media query] như sau
body {
background: #fff;
color: 333;
}@media all and [max-width: 320px] {
body {
background: #e7e7e7;
}
}
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 mặc định sẽ có nền [nền] 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
4 có nghĩa là thiết lập điểm dừng cho toàn bộ thiết bị [tất cả – loại phương tiện] và có chiều rộng cố định tối đa là 320px [chiều rộng tối đa – tính năng phương tiện], 320px tương ứng với chiều rộng của chiều rộng . Và các đoạn CSS nằm bên trong truy vấn này sẽ được thực thi khi màn hình duyệt lại đúng với kích thước từ 320px trở xuống
body {
background: #fff;
color: 333;
}@media all and [max-width: 320px] {
body {
background: #e7e7e7;
}
}
Ngoài ra, bạn cũng có thể thiết lập thêm nhiều điều kiện như
@media only screen and [min-width: 320px] and [max-width: 860px] {…}Tức 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, đ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à các tính năng phương tiện trong truy vấn @media, bạn có thể tham khảo thêm tại W3Schools để đầy đủ hơn nhưng thông thường ta cứ viết CSS cho loại phương tiện là màn hình và các tính năng phương tiện chỉ xoay quanh chiều rộng tối thiểu, tối đa
Làm sao để kiểm tra Responsive?
Khi làm việc, bạn có thể kiểm tra Responsive bằng cách co giãn kích 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 khích các bạn sử dụng các công cụ hỗ trợ kiểm tra, một trong những công cụ kiểm tra Responsive mà mình thích nhất đó là Resizer, rất dễ sử dụng và gọn nhẹ. Vui lòng xem cách sử dụng bằng hình ảnh bên dưới
Danh sách các 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 nắm được kích thước màn hình của các loại điện thoại thông minh để có thể viết CSS theo ý muốn và đảm bảo rằng nó hoạt động tốt trên nhiều thiết bị, tốt nhất là
Bạn có thể tham khảo kích thước chiều rộng của các thiết bị tại đây, nhưng bạn chỉ cần tạo các điểm ngắt CSS như sau
5 [Điện thoại di động, hiển thị theo chiều dọc]
body {
background: #fff;
color: 333;
}@media all and [max-width: 320px] {
body {
background: #e7e7e7;
}
}
6 [Điện thoại di động, hiển thị chiều ngang]
body {
background: #fff;
color: 333;
}@media all and [max-width: 320px] {
body {
background: #e7e7e7;
}
}
0 [bảng máy tính, hiển thị theo chiều dọc]
body {
background: #fff;
color: 333;
}@media all and [max-width: 320px] {
body {
background: #e7e7e7;
}
}
1 [bảng máy tính, hiển thị chiều ngang]
body {
background: #fff;
color: 333;
}@media all and [max-width: 320px] {
body {
background: #e7e7e7;
}
}
2 [bảng loại máy tính, hiển thị theo chiều dọc]
body {
background: #fff;
color: 333;
}@media all and [max-width: 320px] {
body {
background: #e7e7e7;
}
}
3 [bảng loại máy tính, hiển thị chiều ngang]
body {
background: #fff;
color: 333;
}@media all and [max-width: 320px] {
body {
background: #e7e7e7;
}
}
4 [từ size này trở thành thông thường cho desktop list]
body {
background: #fff;
color: 333;
}@media all and [max-width: 320px] {
body {
background: #e7e7e7;
}
}
Ví dụ cấu trúc CSS của một giao diện Responsive thông thường
________số 8Mobile-First
Khi nói về làm giao diện Responsive thì bạn cũng cần biết qua khái niệm Mobile-first vì nó sẽ giúp quy trình làm giao diện Responsive của bạn nhanh hơn rất nhiều. Mobile-first nghĩa là đặt tên cho một quy trình thiết kế mà chúng ta sẽ bắt đầu thiết kế cho giao diện ở điện thoại trước và sử dụng điện thoại làm nền tảng ban đầu, sau đó sẽ đến các thiết bị khác như máy tính bảng,
Đặc điểm của quy trình mobile-first là chúng ta chỉ sử dụng các tính năng phương tiện là chiều rộng tối thiểu chứ không sử dụng cái gì khác. Mình có 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 các CSS bên trong, đương nhiên nó cũng sẽ bao gồm luôn giao diện máy tính bảng, máy tính để bàn,…
Và khi sử dụng quy trình mobile-first thì CSS của bạn sẽ có cấu trúc thế này
0
body {
background: #fff;
color: 333;
}@media all and [max-width: 320px] {
body {
background: #e7e7e7;
}
}
Thế tại sao lại nên sử dụng mobile-first?
- Tập trung tối đa vào giao diện trên điện thoại vì xu hướng sử dụng điện thoại ngày càng tăng
- Chuyển việc viết lại CSS, vì CSS trên điện thoại có thể được tái sử dụng trên máy tính để bàn. Nhưng nếu bạn viết CSS trên máy tính để bàn trước thì ở giao diện điện thoại bạn vẫn phải viết lại nếu muốn tùy biến
- Dễ dàng trong việc khai thác và quản lý, nâng cấp sau này
- Tránh các lỗi hiển thị trên điện thoại do tùy chọn biến CSS từ máy tính để bàn
- And many reason do other which only when doing new know
Một số kiến thức cần biết khi viết CSS Responsive
- Ngoài đơn vị của breakpoint là px, thì các đơn vị đo chiều dài trong trang web phải là phần trăm. Hay nói đúng hơn là sử dụng đơn vị tương đối
- Nên sử dụng
5 thay vì
body {
background: #fff;
color: 333;
}@media all and [max-width: 320px] {
body {
background: #e7e7e7;
}
}
6 để tránh cố định chiều rộng
body {
background: #fff;
color: 333;
}@media all and [max-width: 320px] {
body {
background: #e7e7e7;
}
}
- Sử dụng hiển thị. none for other components to hide in each device that you want to hide. And display. chặn ở các thiết bị cần hiển thị ra
- Sử dụng tùy chọn. quan trọng nếu cần thiết overs over CSS
Cơ bản chỉ là vậy thôi, thực hiện Responsive thì căng thẳng nhất là phần làm menu nhưng khi thực hiện bạn sẽ nêu rõ chi tiết hơn
Lời kết
Trong bài này mình đã nói chi tiết qua khái niệm Responsive và cách phát triển khai một giao diện Responsive là như thế nào. Bây giờ bạn có thể thực hiện hành động bằng cách tạo một tệp HTML đơn giản, rồi khai báo thẻ meta viewport rồi thử viết CSS để xác định rõ hơn về cách hoạt động của nó nhé.
Hy vọng trong tương lai, mình sẽ có một bài hướng dẫn làm website giao diện HTML dạng Responsive hoàn chỉnh để bạn có thể tự thực hiện. Và khi mà bạn đã nắm được cách làm giao diện Responsive rồi thì việc làm theme WordPress Hỗ trợ Responsive không còn quá khó khăn nữa. Mọi thứ sẽ được mình trình bày từ