68. RWD Viewport Trong CSS Responsive

RWD Viewport trong CSS Responsive: Thẻ <meta> viewport trong HTML được sử dụng để cấu hình cách trình duyệt hiển thị và thu phóng trang web trên các thiết bị di động. Sử dụng thẻ <meta> viewport rất quan trọng trong Responsive Web Design để đảm bảo rằng trang web được hiển thị chính xác trên các thiết bị di động.

Dưới đây là một ví dụ minh họa về cách sử dụng thẻ <meta> viewport trong HTML:

html

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      text-align: center;
    }

    .container {
      width: 80%;
      margin: 0 auto;
      padding: 20px;
      background-color: #f0f0f0;
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Responsive Design with Viewport Meta Tag</h1>
    <p>This is a responsive website that adapts to different screen sizes.</p>
  </div>
</body>
</html>

Trong ví dụ này:

Chúng ta sử dụng thẻ <meta> viewport để cấu hình viewport của trang web.
Thuộc tính content của thẻ <meta> viewport được đặt thành "width=device-width, initial-scale=1.0". Điều này cho biết rằng trang web sẽ sử dụng chiều rộng của thiết bị (device-width) và tỷ lệ thu phóng ban đầu (initial-scale) là 1.0.
Sử dụng CSS để tạo kiểu cho .container, giống như ví dụ trước.

Thẻ <meta> viewport giúp đảm bảo rằng trang web sẽ hiển thị đúng kích thước và tỷ lệ thu phóng trên các thiết bị di động, tạo ra trải nghiệm tốt hơn cho người dùng.

Leave a Comment Cancel Reply