Giải thích về min-width và max-width trong CSS dễ hiểu nhất

Một trong những kỹ thuật quan trọng nhất đối với thiết kế giao diện website hiện giờ là responsive. Nghĩa là website phải tự động co giãn phù hợp với kích thước của trình duyệt, của thiết bị.

Để dễ hình dung thì trên máy tính bảng hoặc điện thoại, các nội dung trên website thường sẽ hiển thị thành một cột. Còn trên máy tính PC, laptop thì có thể nhiều cột.

Để làm được điều này thì chúng ta phải sử dụng @media rule (quy tắt media) trong CSS.

Cách sử dụng @media

@media trong CSS được sử dụng theo dạng:

@media not|only mediatype and (media feature) {
CSS-Code;
}

Trong đó:

mediatype bao gồm:

  • all: Dùng cho mọi thiết bị
  • print: Dùng cho máy in
  • screen: Dùng cho máy tính và các thiết bị smart phone

media featured bao gồm:

  • aspect-ratio: Tỉ lệ giữa chiều rộng và chiều cao của viewport
  • min-aspect-ratio: Tỉ lệ tối thiểu giữa chiều rộng và chiều cao của viewport
  • max-aspect-ratio: Tỉ lệ tôi đa giữa chiều rộng và chiều cao của viewport
  • color: Số bits cho mỗi màu sắc của device
  • color-index: Số lượng màu sắc mà device có thể hiển thị
  • device-aspect-ratio: Tỉ lệ giữa chiều rộng và chiều cao của device
  • max-device-aspect-ratio: Tỉ lệ tối đa giữa chiều rộng và chiều cao của device
  • min-device-aspect-ratio: Tỉ lệ tối thiểu giữa chiều rộng và chiều cao của device
  • device-height: Chiều cao của device
  • device-width: Chiều rộng của device
  • height: Chiều cao của viewport
  • width: Chiều rộng của viewport
  • max-width: Chiều rộng tối đa của viewport
  • min-width: Chiều rộng tối thiểu của viewport
  • max-height: Chiều cao tối đa của viewport
  • min-height: Chiều cao tối thiểu của viewport
  • min-device-width: Chiều rộng tối thiểu của device
  • max-device-width: Chiều rộng tối đa của device
  • min-device-height: Chiều cao tối thiểu của device
  • max-device-height: Chiều cao tối đa của device
  • orientation: Định hướng của khung nhìn (xoay hoặc không xoay thiết bị)
  • resolution: Độ phân giải của thiết bị đầu ra (sử dụng dpi hoặc dpcm)

Trong quy tắc @media chúng ta sẽ cần phải xác định xem thử là kích thước màn hình như thế nào để hiển thị các thuộc tính CSS. Và thông thường max-widthmin-width là cách để chúng ta quy định kích thước màn hình.

Và max-width và min-width hoạt động theo sơ đồ dưới đây.

Ví dụ

Sau đây là một ví dụ

@media (min-width: 922px) {
.ast-left-sidebar #secondary,
.ast-right-sidebar #primary {
padding-right: 25px;
}

Trong ví dụ này, nếu như kích thước màn hình lớn hơn hoặc bằng 922px, thì những thuộc tính CSS bên trong sẽ được áp dụng.

0967 09 0008