Tạo menu điều hướng responsive với CSS Media Queries

Giới thiệu

Media Queries được dùng khi bạn cần đặt kiểu cho các thiết bị khác nhau như máy tính bảng, điện thoại, máy tính để bàn, v.v.

Ví dụ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .demo {
            overflow: hidden;
            background-color: blue;
        }
        .demo a {
            float: left;
            display: block;
            color: white;
            text-align: center;
            padding: 10px;
            text-decoration: none;
        }
        @media screen and (max-width: 600px) {
            .demo a {
                float: none;
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <p>Menu điều hướng:</p>
    <div class="demo">
        <a href="#">Trang chủ</a>
        <a href="#">Giới thiệu</a>
        <a href="#">Hướng dẫn</a>
        <a href="#">Hỏi đáp</a>
        <a href="#">Video</a>
        <a href="#">Liên hệ</a>
    </div>
</body>
</html>