CĂN BẢN
CSS3
CSS RESPONSIVE
CSS PARALLAX
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
Dự án mới của mình là gamehow.net, mời anh em ghé thăm và góp ý ạ.

Bài 04: Video học làm Responsive CSS căn bản

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é.

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

video responsive css canban png

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é.

video responsive css canban 1 pngOk 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.

Cùng chuyên mục:

Validate form bằng HTML5

Validate form bằng HTML5

Trước đây chúng ta hay validate form bằng Javascript, nhưng ...

Thẻ aside trong HTML5

Thẻ aside trong HTML5

Mình cũng không rõ người ta tạo ra thẻ này làm gì, nhưng nếu xét…

Thẻ hgroup trong HTML5

Thẻ hgroup trong HTML5

hgroup là một thẻ được thêm vào kể từ phiên bản ...

Thẻ header trong HTML5

Thẻ header trong HTML5

Nếu nhìn qua một trang web được xây dựng bằng HTML5 thì bạn ...

Các thẻ HTML tạo form thu thập dữ liệu

Các thẻ HTML tạo form thu thập dữ liệu

Trước khi bắt đầu thì bạn phải hiểu khái niệm form dữ liệu là ...

Tạo background và đường viền cho thẻ HTML

Tạo background và đường viền cho thẻ HTML

Để tạo màu nền cho một thẻ HTML bất kì thì ta sử dụng thuộc…

Tạo menu một cấp bằng HTML đơn giản

Tạo menu một cấp bằng HTML đơn giản

Để làm menu 1 cấp thì có rất nhiều giải pháp. Bạn có thể sử…

Tạo HTML danh sách bài viết đơn giản

Tạo HTML danh sách bài viết đơn giản

Mục đích mình đưa ra bài tập này là giúp các bạn hiểu được cách…

Tạo bổ cục layout HTML đơn giản

Tạo bổ cục layout HTML đơn giản

Qua bài học này bạn sẽ biết cách tạo một file style riêng để ..

Phân biệt ID và Class trong HTML

Phân biệt ID và Class trong HTML

Mỗi thẻ HTML đều có những thuộc tính riêng và khác nhau. Tuy nhiền ..

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Thẻ div đóng vai trò rất quan trọng, nó được dùng để tạo ...

Phân biệt thẻ HTML Block và Inline

Phân biệt thẻ HTML Block và Inline

Có bao giờ bạn thắc mắc rằng, tại sao nội dung ...

Thuộc tính style trong HTML

Thuộc tính style trong HTML

Do chúng ta chưa học CSS nên mình sẽ không nói ...

Thẻ title trong HTML

Thẻ title trong HTML

Cách sử dụng thẻ title html ...

Thẻ style trong HTML

Thẻ style trong HTML

Style là một thẻ HTML bình thường, nó có công dụng là xác ...

Thẻ base trong HTML

Thẻ base trong HTML

Cách sử dụng thẻ base trong html ...

Thẻ link trong HTML

Thẻ link trong HTML

Cách sử dụng thẻ html ...

Thẻ meta trong HTML

Thẻ meta trong HTML

Cách sử dụng thẻ meta html ...

Thẻ script trong HTML

Thẻ script trong HTML

Cách sử dụng thẻ script html ...

Thẻ noscript trong HTML

Thẻ noscript trong HTML

Cách sử dụng thẻ noscript html ...

Top