Tạo logo responsive với CSS min() function (không cần media query)

Hàm min() cho phép đặt giá trị tối đa cho kích thước: width: min(50vw, 300px) = tối đa 300px, nhưng co lại nếu viewport nhỏ hơn.

Cú pháp

selector { width: min(value1, value2, ...); }

Ví dụ 1: Logo responsive

<!DOCTYPE html>
<html>
<head>
  <style>
    img {
      float: left;
      height: min(40vw, 384px);  /* Max 384px, co lại trên mobile */
      margin: 3%;
    }
    .text-content { overflow: hidden; padding: 20px; }
  </style>
</head>
<body>
  <div>
    <img src="logo.png" alt="Logo">
    <div class="text-content">
      <h3>Responsive LOGO!</h3>
      <p>Nội dung văn bản bao quanh logo...</p>
    </div>
  </div>
</body>
</html>

Ví dụ 2: Container responsive

<style>
  .container {
    width: min(90%, 1200px);
    margin: 0 auto;
  }
  .hero-image {
    width: min(100vw - 40px, 800px);
  }
</style>

Kết quả

Logo tự động thu nhỏ khi màn hình hẹp, nhưng không bao giờ lớn hơn 384px. Không cần media query!

Hàm liên quan

• max(): lấy giá trị lớn nhất - width: max(300px, 50%) = tối thiểu 300px
• clamp(): giá trị min, preferred, max - font-size: clamp(1rem, 2.5vw, 2rem)

Hỗ trợ trình duyệt

Chrome 79+, Firefox 75+, Safari 13.1+, Edge 79+. Rất tốt cho production hiện nay.