Responsivetemplate là gì?
Là thiết kế bố cục một trang web đáp ứng sự linh hoạt, điều chỉnh chiều rộng và phong cách của mình theo kích thước màn hình của các thiết bị có kích thước màn hình khá nhau. Nó sẽ trông khác nhau trên khi xem màn hình máy tính để bàn so với khi xem trên một điện thoại thông minh hoặc Tablet (có hai kích cỡ: chân dung và phong cảnh)
Đối với người dùng Blogger:
Nếu bạn đã kích hoạt Responsive di động cho blog blogger thì khi bạn xem blog của bạn trên một điện thoại thông minh, bạn sẽ thấy một giao diện hoàn toàn khác so với khi xem trên một máy tính để bàn hay latop của bạn. Theo mặc định, tất cả các blog blogger đã được tối ưu hóa khi xem bằng điện thoại di động nhưng giao diện mobile còn quá đơn giản và không đại diện cho blog của bạn vì vậy chúng ta sẽ học cách tạo và bố trí mang phong cách riêng cho các blogger mình.
Xem thử blog của bạn trên ác trình duyệt khác nhau!
Bạn có thể sem trước blog ủa bạn sẽ thay đổi thế nào khi áp dụng thủ thuật mà namkna sẽ giới thiệu sau đây bằng cách sử dụng công cụ sau:
☼ 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.
☼ 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}
}