Mình đã viết được ba bài làm nền cho video này nên trước xem video này bạn hãy xem ba bài đó trước, hãy đọc sơ qua chứ không cần phải đọc kỹ nhé :). Trong video này mình sẽ hướng dẫn làm một layout đơn giản và sử dụng lệnh @media để thiết lập CSS cho nhiều loại thiết bị khác nhau.
1. Sử dụng firebug Chrome để check responsive
Trong Chrome có một addon tên là Firebug dùng để check mã code HTML CSS, và ngoai ra nó cũng cho phép ta kiểm tra responsive nữa. Bạn nãy cài đặt addon này và hấn F12 sẽ thấy ở phía dưới xuất hiện một ô check mã nguồn HTML và CSS, tại đây ban hãy click vào biểu tượng responsive để bật nó nhé.
Sau khi bật xong bạn sẽ thấy ở phía trên cùng của giao diện xuất hiện một thanh công cụ, tại đây bạn hãy lựa chọn thiết bị hoặc responsive và kích thước ở các ô phân cấp của nó để kiểm tra nhé.
Bài viết này được đăng tại [kiso.vn]
Ok vậy là ta có thể kiểm tra Responsive một cách chuẩn xác được rồi đấy 🙂
2. Xây dựng layout và Responsive cho website
Bạn hãy tạo một file index.html và dán nội dung sau vào:
<!DOCTYPE html>
<html>
<head>
<title>Responsive</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet"/>
</head>
<body>
<div class="container">
<div class="main">
<div class="content">
<div class="item">
<h2>Noi dung tieu de</h2>
<p>Phan gioi thieu</p>
</div>
<div class="item">
<h2>Noi dung tieu de</h2>
<p>Phan gioi thieu</p>
</div>
<div class="item">
<h2>Noi dung tieu de</h2>
<p>Phan gioi thieu</p>
</div>
<div class="item">
<h2>Noi dung tieu de</h2>
<p>Phan gioi thieu</p>
</div>
<div class="item">
<h2>Noi dung tieu de</h2>
<p>Phan gioi thieu</p>
</div>
</div>
<div class="sidebar">
<div class="widget">
<h2>Tieu de</h2>
<div class="box">
Noi dung ben trong
</div>
</div>
<div class="widget">
<h2>Tieu de</h2>
<div class="box">
Noi dung ben trong
</div>
</div>
<div class="widget">
<h2>Tieu de</h2>
<div class="box">
Noi dung ben trong
</div>
</div>
</div>
</div>
</div>
</body>
</html>Và đây là nội dung file style.css.
*{
margin: 0px;
padding: 0px;
}
.container{
margin: 0px 50px;
overflow: hidden;
}
.content{
float: left;
width: 70%;
}
.content .item{
height: 100px;
margin: 10px;
background: #ccc;
}
.sidebar{
float: right;
width: 30%;
}
.sidebar .widget{
height: 100px;
margin: 10px;
background: #ccc;
}Bạn hãy chạy file index.html lên và sử dụng chức năng responsive của Chrome để xem kết quả nhé. Bây giờ mình sẽ bổ sung một số đoạn media query để tạo responsive như sau:
@media only screen and (min-width: 320px) and (max-width: 374px)
{
.container{
margin: 0px 10px;
}
.content, .sidebar{
float:none;
width: 100%;
}
}
@media only screen and (min-width: 374px) and (max-width: 424px)
{
.container{
margin: 0px 10px;
}
.content, .sidebar{
float:none;
width: 100%;
}
}
@media only screen and (min-width: 425px) and (max-width: 767px)
{
.container{
margin: 0px 10px;
}
.content, .sidebar{
float:none;
width: 100%;
}
}
@media only screen and (min-width: 768px) and (max-width: 1023px)
{
.container{
margin: 0px 10px;
}
}
@media only screen and (min-width: 1024px) and (max-width: 1439px)
{
.container{
margin: 0px 10px;
}
}Đây chính là các mốc responsive thông thường ta hay sử dụng để kiểm tra responsive. Công biệc bây giờ của bạn là hãy copy từng mốc và kiểm tra kết quả của chúng tại mốc đó nhé.
3. Lời kết
Mình có quay video kèm theo nên nếu bạn lười đọc có thể xem video để dễ hiểu bài hơn. Hy vọng qua video này sẽ giúp bạn có cái nhìn tổng quát về các làm responsive cho website để từ đó có thể học thêm các Framework khác như Bootstrap.
Bài viết liên quan
[CSF-2] Một số thiết lập CSF, LFD
Hôm nay mình sẽ thực hiện một số thiết lập trên CSF Mở file config để sửa đổi một số tính năng dưới /etc/csf/csf.conf Nội dung chính1. Sử dụng firebug Chrome để check responsive2. Xây...
[CSF-1] Tăng bảo mật Server với ConfigServer Firewall (CSF)
Nội dung chính1. Sử dụng firebug Chrome để check responsive2. Xây dựng layout và Responsive cho website3. Lời kết1. Khái niệm CSF: CSF (ConfigServer & Firewall) là một bộ ứng dụng hoạt động trên Linux...
Sử dụng SSH Key với Gitlab và Github
Bài viết này mình sẽ hướng dẫn các bạn tạo ssh key cho Gitlab và Github SSH là gì? Secure Socket Shell là một giao thức mạng dùng để thiết lập kết nối mạng một...
Directory traversal vulnerabilities (phần 4)
Nội dung chính1. Sử dụng firebug Chrome để check responsive2. Xây dựng layout và Responsive cho website3. Lời kếtV. Phân tích và khai thác các lỗ hổng Directory traversal (tiếp) 5. Bypass lỗ hổng khi...
Directory traversal vulnerabilities (phần 3)
Nội dung chính1. Sử dụng firebug Chrome để check responsive2. Xây dựng layout và Responsive cho website3. Lời kếtV. Phân tích và khai thác các lỗ hổng Directory traversal 1. Lỗ hổng xảy ra khi...
Directory traversal vulnerabilities (phần 2)
Nội dung chính1. Sử dụng firebug Chrome để check responsive2. Xây dựng layout và Responsive cho website3. Lời kếtIII. Vì sao lỗ hổng Directory traversal xuất hiện? Với mỗi ngôn ngữ lập trình khác nhau,...