Cung cấp các thuộc tính
1.4.3 Các nguyên tắc cơ bản để thiết kế website chuẩn Responsive
A. Flexible Grid
a. ViewPort
[7]Nếu bạn không sử dụng thẻ <meta>, web của bạn sẽ gặp đôi chút trục trặc, chẳng hạn như quá nhỏ hoặc kích thước các bố cục bị dài quá khung màn hình. Việc sử dụng thể này sẽ cho phép thiết bị biết được kích thước khung hình và hiển thị tốt hơn nhiều.
• width=device-width: thiết lập chiều rộng của trang web theo chiều rộng của thiết bị
• initial-scale=1.0: thiết lập mức độ zoom ban đầu khi trang web được load bởi trình duyệt
b.Fluid Grid – Bố cục linh hoạt
Nguyễn Đức Nguyên 35 Lớp CNPM - K62B
Fluid Grid là một hệ thống bố cục được vẽ dựa trên độ phân giải màn hình của người dùng, trái ngược hồn tồn với những layout có chiều ngang cố định. Các lưới linh hoạt này được xây dựng trên các đơn vị tính, hầu hết nên sử dụng phần trăm (%), chẳng hạn cột có độ rộng là 25%, và đơn vị em (để tạo ra khoảng cách giữa các cột).
B. Media Queries
Thực tế Fluid Grid chỉ làm trịn nhiệm vụ của mình. Khi các trình ngày càng hẹp hơn, thử thách mới bắt đầu xuất hiện, đó là lý do vì sao chúng ta cần Media Queries.
Media Queries là một kỹ thuật CSS, Ta sử dụng cú pháp @media để bao gồm một khối các thuộc tính CSS chỉ khi một điều kiện nhất định là đúng.
Cách thức sử dụng Media Queries
• Sử dụng trực tiếp cú pháp @media ở trong file style sẵn có.
• Tạo 1 file chứa Media Queries riêng và @import nó vào CSS.
• Gắn riêng mỗi file style trên các khung hình khác nhau vào qua HTML.
Nguyên tắc của Mobile First trong Responsive
Mobile-first là tiêu chuẩn ưu tiên mặc định cho các khung hình nhỏ như thiết bị di động sau đó mới cho các tablet và desktop.
Hình 2- 15 : Nguyên tắc của Mobile First trong Responsive
/Smart phone nhỏ/
@media screen and (min-width: 240px){ } /Iphone(480 x 640)/
@media screen and (min-width: 320px){ } /Tablet nhỏ(480 x 640)/
@media screen and (min-width: 480px){ } /Ipad dọc(768 x 1024)/
@media screen and (min-width: 768px){ } /Ipad ngang(1024 x 768)/
@media screen and (min-width: 1024px){ } 1.5Cơng cụ lập trình