Thiết lập dạng responsive cho Blogger và mọi mã nguồn khác

Ngày này, hầu hết các doanh nghiệp mới đều muốn có một phiên bản di động cho trang web của họ. Đó là nhu cầu thực tế rất cần thiết vì rất nhiều khách hàng của họ sử dụng smartphone để truy cập Web và họ phải có một thiết kế cho BlackBerry, khác dành cho iPhone, iPad, netbook, Kindle – và tất cả phải tương thích với độ phân giải màn hình của các thiết bị đó.

Trong lĩnh vực thiết kế và phát triển web, chúng ta nhanh chóng nhận ra rằng không thể theo kịp với sự phát triển của các thiết bị mới với những độ phân giả màn hình khác nhau. Đối với các doanh nghiệp, tạo ra từng phiên bản website phù hợp với mỗi thiết bị có độ phân giải mới là điều không thể, hoặc ít nhất là không thực tế. Nên chúng ta phải lựa chọn là mất một lượng khách hàng truy cập từ các thiết bị di động mới hoặc có giải pháp…
Khái niệm về Responsive Web Design
Responsive Web Design (RWD) là xu hướng mới theo đó quy trình thiết kế và phát triển web sẽ đáp ứng mọi thiết bị và môi trường của người dùng theo các tiêu chí kích thước và chiều của màn hình thiết bị. Để làm được điều đó chúng ta sẽ sử dụng linh hoạt kết hợp các kỹ thuật bao gồm flexible grid, responsive image và CSS media query. Khi người dùng chuyển từ máy tính xách tay của họ sang iPad hay iPhone, trang web sẽ tự động chuyển đổi để phù hợp với kích thước màn hình và kịch bản xử lý. Nói cách khác, các trang web cần phải có công nghệ tự động đáp ứng theo thiết bị của người dùng. Điều này sẽ loại bỏ sự cần thiết cho nhiều thiết kế web khác nhau và giảm thiểu thời gian cũng như chi phí thiết kế web.

Vậy làm sao để Thiết lập dạng responsive.

1. Với Blogger :

Responsive Blogger template đang là xu hướng lựa chọn của rất nhiều blogger. Với thiết kế responsive, blog của bạn sẽ hiển thị độ rộng tương thích với tất cả các thiết bị máy tính, di động. Hiện nay các template dạng responsive dành cho Blogger được chia sẻ khá phổ biến. Hôm nay mình sẽ hướng dẫn các bạn một cách đơn giản để thiết lập dạng responsive cho blog.

Bước 1: Tại trang quản trị, các bạn vào Mẫu > Chỉnh sửa HTML, chèn đoạn code sau vào trước thẻ đóng </head>:

Bước 2: Chèn đoạn code sau vào trước thẻ ]]></b:skin> là bạn đã hoàn thành thủ thuật:

@media screen and (max-width : 1280px) {/* CSS FOR NETBOOK AND DESKTOP ------------*/}
@media screen and (max-width : 1024px) {/* CSS FOR TABLETS ------------*/}
@media screen and (max-width : 768px) {/* CSS FOR SMALL TABLETS ------------*/}
@media screen and (max-width : 640px) {/* CSS FOR IPHONE ------------*/}
@media screen and (max-width : 480px) {/* CSS FOR MOBILES ------------*/}
@media screen and (max-width : 320px) {/* CSS FOR SMALL OLD MOBILES ------------*/}