Responsive template là gì?
Đây là một dạng template được thiết kế một cách linh hoạt, có thể tự điều chỉnh chiều rộng và style của blog/website theo kisck thước màn hình của thiết bị. Khi hiển thị trên màn hình máy tínhsẽ khác khi hiển thị trên một điện thoại thông minh hoặc Tablet. Và bạn có thể kiểm tra độ responsive của blog/website của bạn tại đâyVậy làm thế nào để thiết kế Responsive template?
Nếu bạn đã biết một số điều cơ bản của HTML và CSS thì bạn sẽ thực hiện rất dễ dàng và có thể tùy biến với từng thành phần trong blog/website của mình. Và để cho trình duyệt trên các thiết bị di động/tablet phát hiện các screensize chúng ta sẽ bổ sung thêm một thẻ meta trong phần <head>Và bạn có thể thực hiện theo hai bước hướng dẫn cơ bản phía dưới:
1.Thêm thẻ meta bên dưới vào sau <head>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
- width=device-width sẽ giúp cho template nhận biết kích cỡ màn hình
2.Sử dụng CSS3 để truyền thông tin
Xem hai ví dụ bên dưới dành cho điện thoại thông minh và các thiết bị Tablet.
@media screen and (max-width : 480px) {Ví dụ cụ thể: Nếu bạn muốn phần related post trong blog của bạn có chiều cao là 400px, và font chữ h1 trong bài viết của blog có size là 120% khi chiều rộng của thiết bị là 480px thi bạn sẽ phải thêm đoạn code sau
/*Nếu kích thước màn hình nhỏ hơn 480px sẽ áp dụng thay đổi kích thước và style */
/* Dành cho điện thoại thông minh */
}
@media screen and (max-width : 768px) {
/* Nếu kích thước màn hình nhỏ hơn 768px sẽ áp dụng thay đổi kích thước và style */
/* Dành cho Tablets */
}
@media only screen and (max-width:480px){
.post h1{font-size:120%}
#related_posts ul{height: 400px;}
}
Vậy làm sao để tìm từng thành phần trong blog để thực hiện thay đổi kích cỡ cho chúng như ví dụ trên là #related_posts?
Mình sẽ hướng dẫn bạn cách lấy giá trị từng thành phần trong blog thông qua trình duyệt web Chrome và cụ thể sẽ lấy giá trị của phần Related post trong blog của mình- Đưa chuột vào phần Related Posts sau đó click chuột phải
- Hiện ra một khung phía dưới, ta di chuột xuống đến khi thấy phần ta cần tìm giá trị được bôi tô đậm lên và giá trị ta cần tìm được chỉ bằng mũi tên màu xanh như hình dưới
Đặt đoạn code này ở đâu trong template:
Bạn nên cho tất cả code Responsive này vào trong thẻ <style type='text/css'> và đặt sau thẻ đóng ]]></b:skin>.Ví dụ:
...
]]></b:skin>
<style type='text/css'>
@media only screen and (max-width:480px){
.post h1{font-size:120%}
#related_posts ul{height: 400px;}
}
</style>
...
Kết:
- Đừng ngại comment nếu bạn có thắc mắc gì liên quan đến bài viết nha!
- Do máy tính mình bị sét đánh hỏng nên bài viết này mình phải ra quán net nên không thu thập được đầy đủ thông tin và hình ảnh hướng dẫn cụ thể, mong bạn thông cảm nha!
- Bài viết này mình có tham khảo tư liệu từ BMT và kinh nghiệm bản thân. Vì thế nếu bạn muốn chia sẻ bài viết này xin ghi rõ nguồn. Mong bạn sẽ luôn ủng hộ TrollVL. Cảm ơn!
4 comments
Số trong width,hight là như thé nào ? Bạn nói xem thế có liên quan j đâu nhỉ ?Mong dc giải đáp ?
Để hiểu chuyên sâu hơn về vấn đề này bạn nên tham khảo các tài liệu về CSS trước đã
Cảm ơn bạn đã ghé thăm Troll VL !
Insert Emoticons» Tạm thời ngăn không cho comment với chế độ ẩn danh vì có một số bạn không có thành ý cố tình spam. Mong các bạn thông cảm!
» Bạn nên viết bằng Tiếng Việt có dấu để mọi người dễ đọc, dễ bình luận
» Để liên hệ,góp ý và đóng góp bài viết bạn click vào đây
Sử dụng các thẻ sau cho comments
» Chèn nội dung vào blockquote <b rel="quote">Nội dung blockquote</b>
» Chèn nội dung vào note <em rel="note">Nội dung note</em>
» Chèn code vào khung pre <i rel="pre">Nội dung code</i>
» Chèn hình ảnh <i rel="image">Link hình ảnh</i>
» Chèn video từ youtube [youtube]link video[/youtube]
» Chèn link <i rel="anchor">Link</i>
Mã Hóa Code Tạo và xem trước comments Cancel Reply
&Convert
'Convert
"Convert
<Convert
>