Responsive Blogspot

Testing Responsive Designs

☼ Bước 1: Thêm thẻ meta hỗ trợ Responsive template.
1- Đăng nhập vào blog
2- Chọn mẫu (template)
3- Chọn chỉnh sửa HTML.
4- Dán mã dưới đây vào sau thẻ <head> :
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

Trong đó:
width=device-width sẽ giúp phát hiệ và nhận biết kích cỡ màn hình khác nhau.

5- Lưu mẫu lại và tiến hành bước tiếp theo.
@media screen and (max-width : 480px) { #main-wrapper{width:100%px} #sidebar-wrapper{float:none} }
☼ Bước 1: Dùng CSS 3 để truy vấn các cài đặt của bạn cho các giao diện khác nhau.

Các thẻ Media dán trước thẻ ]]></b:skin> sẽ truy vấn theo thuộc tính CSS3 đã định trước để phát hiện kích thước màn hình và áp dụng các cài đặt cho kiểu màn hình đó.

Các bạn có thể xem hai ví dụ về việc truy vấn media cho điện thoại thông minh và các thiết bị Tablet.@media screen and (max-width : 480px) { /* nếu kích thước màn hình từ 480px trở xuống sẽ truy vấn các thuộc tính trong thẻ media này */ /* Dành cho điện thaoij thông minh */ } @media screen and (max-width : 768px) { /* nếu kích thước màn hình từ 768px trở xuống sẽ truy vấn các thuộc tính trong thẻ media này */ /* Dành cho Tablets */ }

Dưới đây là một số lời khuyên thú vị mà các bạn nên ghi nhớ khi áp dụng viết này:

Mẹo để nhớ:
Sử dụng em thay vì các điểm ảnh (px) để xác định font-sizes, padding, margin .v.v....
Sử dụng tỷ lệ phần trăm (%) thay vì giá trị số để xác định chiều rộng của cột
Tạo media riêng cho 3 kiểu màn hình chính là: 480/768/1024
Hãy nhớ sử dụng hộp kích thước (box-sizing), chiều rộng tối đa (max-width) và chiều rộng tối thiểu (min-width).

Ví dụ mình muốn thay đổi độ rộng của phần main, và để phần sidebar xuống dưới phần main khi xem ở điện thoại có kích thước màn hình dưới 480 thì sẽ dán code sau trước thẻ ]]></b:skin>

@media screen and (max-width : 480px) { #main-wrapper{width:100%px} #sidebar-wrapper{float:none} }