HOTLINE: + (123) 1800-567-8990
Mon - Fri: 9:00 - 19:00
  • English
  • Việt Nam
Blog

Cách tạo một trang web responsive

  • November 15, 2015
  • Si Hoang
  • Blog
  • 0 comments

Responsive (RWD) là khái niệm đang rất phổ biến hiện nay. Bài viết này mình sẽ hướng dẫn mọi người tạo 1 trang web responsive đơn giản.

I – Responsive là gì

Hiểu đơn giản Web Responsive là website có chế độ hiển thị phù hợp trên tất cả các thiết bị, mọi độ phân giải màn hình.

II – Công dụng của Responsive

Bạn cứ thử hình dung, website có động rộng khoảng 960px or 1170px,… mà hiển thị dưới màn hình smartphone chỉ có độ phân giải 320px or 640px,.. thì tất nhiên nó sẽ bị che nội dung.
Nếu cố tình ép cho nó hiển thị thì nó sẽ rất nhỏ, muốn đọc được nội dung phải phóng to, kéo qua kéo lại rất phiền phức.
Vì thế, kĩ thuật Responsive cho phép hiển thị nội dung đẹp và phù hợp với mọi độ phân giải màn hình.

III – Cách tạo một trang web Responsive

Có rất nhiều framework css nổi tiếng hỗ trợ chúng ta tạo web responsive, nổi tiếng nhất là Bootstrap, nhưng theo bản thân mình thấy thì sử dụng chúng sẽ làm tốc độ website của bạn chậm lại rất nhiều (vì nó nặng), vì thế hôm nay mình sẽ hướng dẫn các bạn tự code 1 trang web responsive nhé 😀

2 thành phần không thể thiếu của web resonsive là

1. Thẻ meta viewport
2. Css @media query trong css3

Ok, giờ ta bắt đầu làm thử 1 project thực tế nhé,

Ta có giao diện và yêu cầu hiển thị trên các thiết bị như hình dưới

 

Đầu tiên, tạo 1 project, bên trong có file index.htmlstyle.cssreset.css (css cần thiết cho mọi dự án)
Dán code này vào file html :
[html]

[/html]
Đặc biệt chú ý thẻ meta này

Thẻ meta viewport này bắt buộc phải có trong web resonsive, nếu không để vào, khi mở web bằng di động, nội dung nó hiện có chút xíu như con kiến, đọc lé mắt 😀

Tiếp theo dán code này vào file style.css

Ok, view thử lên trình duyệt, ta đã có layout PC, giờ mình sẽ code để layout tự động fix khi hiển thị trên máy tính bảng nhé.
Ở PC, mình để đối tượng A rộng 70%, B rộng 30%, ở máy tính bảng ta thấy A & B full màn hình, tức là 100%.
Để trình duyệt hiểu, khi xuống màn hình ở độ phân giải nhỏ hơn (tablet) 2 đối tượng A & B chuyển thành 100%, ta sẽ thêm câu này vào cuối file style.css

 

Ở đây,  chỉ cần hiểu đơn giản : mặc định A sẽ rộng 70%, B rộng 30%
Ở khoảng rộng màn hình lớn nhất là 768px (max-width :768px) ( khoảng rộng của tablet) thì A & B sẽ chuyển thành 100%.
Hay đơn giản hơn : mặc định A 70%, B 30% và từ khoảng 0px -> 768px, A & B sẽ thành 100%

Giờ, muốn trên smartphone hiển thị như hình bên trên, thêm code này vào cuối file style.css

OK. Tới đây ta đã xong 1 web responsive đơn giản.
Thật ra nguyên lý của responsive rất đơn giản các bạn đọc code 1 lần thì sẽ hiểu à 😀

IV – Lời khuyên khi làm responsive

Dưới đây là 1 số chú ý mình muốn chia sẻ khi các bạn làm web responsive :

+ Về chiều rộng của các thiết bị, thông thường mình hay dùng :

  • 320px -> 640px : khoảng rộng của các smartphone
  • 640px -> 960px : khoảng rộng của tablet
  • 960px trở lên : khoảng rộng của PC

Thật ra thiết bị di động thì nhiều vô kể, vì vậy bạn không nên cứng nhắc 1 con số nào đó, đôi lúc sẽ làm xấu giao diện. Với bản thân mình thì mình chọn các khoảng rộng sao cho web hiển thị tốt và đẹp nhất là được.

+ Về khoảng cách, đơn vị của width trong web responsive

  • Các bạn nên chia % cho các div bố cục
  • Nên sử dụng max-with thay vì width
  • Hình ảnh thì nên để max-width: 100%;

+ Về phân chia bố cục layout

Lời khuyên chân thành của mình là khi code các bạn nên tách nội dung và chia bố cục theo từng row (kiểu xếp chồng từng viên gạch lên nhau –  như code bên trên của mình). Làm vậy code sẽ rõ ràng, khi sửa, xóa ít bị ảnh hưởng tới thành phần khác.

+ Mobile first

Khi làm dự án responsive mọi người thường khuyên nên dựng layout cho di động đầu tiên. Nhưng đối với mình thì cái nào trước cũng ổn cả 😀 quan trọng là mình code rõ ràng, cẩn thận là ổn 😀

Và cuối cùng, khi làm chắc chắn sẽ phát sinh nhiều vấn đề khác nhau, các bạn cùng tham khảo bài 2 để giải quyết nhé 😀

Các vấn đề thường gặp khi làm dự án responsive

 

Leave a comment