19. Max-width Trong CSS

Thuộc tính max-width trong CSS được sử dụng để xác định giá trị tối đa của chiều rộng của một phần tử. Nó đảm bảo rằng phần tử không vượt quá một giới hạn cụ thể khi màn hình hoặc kích thước cửa sổ trình duyệt thay đổi. Điều này hữu ích để đảm bảo rằng nội dung vẫn dễ đọc và dễ quản lý trong các kích thước màn hình khác nhau.

Cú pháp sử dụng max-width như sau:

css

selector {
    max-width: value;
}

Trong đó:

selector là phần tử mà bạn muốn áp dụng thuộc tính.
value là giá trị tối đa của chiều rộng mà phần tử có thể đạt được, được xác định dưới dạng số (px, em, rem, %) hoặc giá trị khác.

Ví dụ:

css

/* Đặt giới hạn chiều rộng tối đa cho phần tử .container là 800px */
.container {
    max-width: 800px;
}

Khi bạn sử dụng max-width, phần tử sẽ tự động co lại khi kích thước màn hình nhỏ hơn giá trị max-width đã định. Điều này giúp giữ cho nội dung linh hoạt và tránh việc nội dung trở nên quá rộng và khó đọc trên màn hình lớn.

Dưới đây là một ví dụ cụ thể về cách sử dụng thuộc tính max-width trong CSS để giới hạn chiều rộng của một phần tử:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /* Đặt giới hạn chiều rộng tối đa cho phần tử .container là 600px */
        .container {
            max-width: 600px;
            margin: 0 auto; /* Canh giữa phần tử */
            padding: 20px;
            background-color: lightgray;
        }

        /* Định dạng văn bản trong phần tử .content */
        .content {
            font-size: 18px;
            line-height: 1.6;
        }
    </style>
    <title>Max Width Example</title>
</head>
<body>
    <div class="container">
        <h1>Giới Hạn Chiều Rộng</h1>
        <div class="content">
            <p>Thuộc tính <code>max-width</code> trong CSS được sử dụng để xác định giới hạn chiều rộng tối đa của một phần tử.</p>
            <p>Nó là một cách tốt để đảm bảo rằng nội dung vẫn dễ đọc và dễ quản lý trong các kích thước màn hình khác nhau.</p>
            <p>Trong ví dụ này, phần tử <code>.container</code> có giới hạn chiều rộng tối đa là 600px và được căn giữa trên trang web.</p>
        </div>
    </div>
</body>
</html>

Trong ví dụ này, phần tử .container có giới hạn chiều rộng tối đa là 600px. Khi màn hình trình duyệt rộng hơn, phần tử sẽ hiển thị ở chiều rộng tối đa đã định. Khi màn hình trở nên nhỏ hơn, phần tử sẽ tự động co lại để phù hợp với kích thước màn hình, giữ cho nội dung dễ đọc và tránh trường hợp nội dung trải rộng quá rộng trên màn hình nhỏ.

Leave a Comment Cancel Reply