Website Responsive là một thuật ngữ hay dùng để chỉ một website có thể hiển thị và tương thích với mọi màn hình trình duyệt mà nó được hiển thị. Ví dụ thông thường một website có độ hiển thị chuẩn trên màn hình máy tính ở Việt Nam là 1024pixel, nhưng chắc chắn nó sẽ hiển thị trên màn hình điện thoại theo chiều rộng là 320pixel – 420pixel. Còn trên Tablet thì lại có kích thước màn hình là 768pixel, vậy làm sao để website có thể hiển thị tốt trên tất cả các thiết bị mà người dùng có thể sử dụng gọi là Website Responsive.
Một điều quan trọng nữa thiết kế website theo kiểu truyền thống người design thường lấy px(pixel) để làm đơn vi tính chiều ngang của một trang web, còn áp dụng kỹ thuật Responsive Designer thường lấy % để định dạng chiều rộng của website, với mục đích tối ưu và thuận tiện xử lý.
Cách thức hoạt động của Responsive là chúng ta sẽ viết code 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 các bạn có thể code và thiết lập một đoạn CSS nào đó chỉ áp dụng cho các trình duyệt có kích thước chiều rộng tối đa ở Iphone 4 là 640px. Responsive sử dụng kỹ thuật thiết kế được xử lý từ client-side chứ không thông qua truy vấn đế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 tốn thời gian chờ đợi để xử lý CSS.
Vậy làm thế nào có thể áp dụng Responsive lên giao diện website?
Để cho website của bạn hiển thị được Responsive, chúng ta có hai bước như sau:
Bước 1: Khai báo trường meta viewport trên website
Trước tiên bạn cần đặt thẻ này vào trong cặp <head> trên trong mã HTML của website của bạn.
<meta name=”viewport”content=”width=device-width,initial-scale=1.0″>
Thẻ meta viewport nghĩa là một thẻ thiết lập hiển thị cho trình duyệt tương ứng với kích thước màn hình.
Chẳng hạn như ví dụ trên, bạn có thể định dạng trình duyệt hiển thị cố định và tương thích 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à không cho phép người dùng phóng to, thu nhỏ, theo chiều ngang của màn hình (thiết lập initial-scale với giá trị cố định là 1.0).
Ngoài ra thẻ meta viewport này còn có các giá trị mình có thể giải thích như sau:
- Width: Định dạng chiều rộng của viewport.
- Device-width: Chiều rộng cố định của thiết bị khác nhau.
- Height: Để thiết lập chiều cao của viewport.
- Device-height: Đó là chiều cao cố định của thiết bị.
- Initial-scale: Định dạng mức phóng to trình duyệt lúc ban đầu, với giá trị là 1 có nghĩa là không phóng to, khi giá trị được thiết lập, định dạng thì người dùng không thể phóng to vì nó đã được cố định.
- Minimum-scale: Là mức phóng to tối thiểu đặt cho thiết bị với trình duyệt.
- Maximum-scale: Mức phóng to tối đa cho một thiết bị với trình duyệt.
- Muser-scalable: Cho phép người dùng có thể phóng to, giá trị thường là yes hoặc no.
Bước 2: Viết CSS cho chiều rộng cho các thiết bị
Ngay tại bước này, chúng ta sẽ triển 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ì chúng ta chỉ viết dựa theo chiều rộng và được tính trên đơn vị là pixel(px). Nhiều người có thể tính dựa trên đơn vị đo là em, rem, DPI, phần trăm(%),…nhưng nếu bạn là người mới thì cứ dùng pixel (px) cho dễ nhé.
Để viết CSS tương ứng cho chiều rộng của trình duyệt sử dụng cú pháp @media trong CSS3 (@media query) giúp ta có thể phân các đoạn CSS theo kích thước màn hình. Kích thước chúng ta đang cần phân chia chính là độ rộng màn hình như sau:
– Các CSS này dùng cho toàn bộ website và desktop
body {
background: #fff;
color: #ccc;
}
– Các CSS này cho Ipad ngang(1024 x 768)
@media screen and (max-width: 1024px){
#wrapper{ width: 100%;}
}
– Các CSS này cho Tablet nhỏ(480 x 640)
@media screen and (max-width: 480px){
}
– Các CSS này cho Iphone(480 x 640)
@media screen and (max-width: 320px){
}
– Các CSS này Smartphone nhỏ
@media screen and (max-width: 240px){
}
Các vấn đề đấy là của coder, mình cũng không cần quan tâm làm gì cho nặng đầu. Vấn đề của bạn chỉ là có một ý tưởng về trang web mà bạn sắp tạo, phần còn lại WebPro sẽ hiện thực nó cho bạn.
