สร้าง Responsive Logo ด้วย CSS min() Function (ไม่ต้อง Media Query)

CSS min() Function เลือกค่าที่น้อยที่สุดจากค่าที่กำหนด ทำให้ Logo Responsive ได้ในบรรทัดเดียว: ขนาดจะไม่เกินค่าสูงสุดที่กำหนด แต่จะย่อตาม Viewport ได้

Syntax

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

ตัวอย่างที่ 1: Logo Height Responsive

<!DOCTYPE html>
<html>
<head>
  <style>
    img {
      float: left;
      height: min(40vw, 384px); /* สูง 40% Viewport แต่ไม่เกิน 384px */
      margin: 3%;
    }
  </style>
</head>
<body>
  <div>
    <img src="https://images.unsplash.com/photo-1610672777263-9bab3d7947f0?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=384&ixlib=rb-1.2.1&q=80&w=384" alt="bride-logo" />
    <h3>Responsive LOGO!</h3>
    <p>Donec consectetur, magna nec rhoncus sodales, erat dui suscipit est...</p>
    <p>Vivamus quis velit diam. Curabitur tempus diam nec enim tincidunt posuere...</p>
  </div>
</body>
</html>

วิเคราะห์ min(40vw, 384px)

• Viewport กว้าง (> 960px): 40vw > 384px → ใช้ 384px (Max Size)
• Viewport แคบ (< 960px): 40vw < 384px → ใช้ 40vw (Scale Down)
• Breakpoint อัตโนมัติ: 384px / 0.4 = 960px

ตัวอย่างที่ 2: Logo Width Responsive

<!DOCTYPE html>
<html>
<head>
  <style>
    div { margin: 2%; float: left; box-shadow: inset 0 0 22px green; }
    img { width: min(45vw, 512px); margin: 3%; }
  </style>
</head>
<body>
  <div>
    <img src="https://images.unsplash.com/photo-1611589694870-377ee3903be0?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=512&ixlib=rb-1.2.1&q=80&w=512" alt="home" />
  </div>
  <h3>Another Responsive LOGO!</h3>
  <p>Donec consectetur, magna nec rhoncus sodales, erat dui suscipit est...</p>
</body>
</html>

CSS Comparison Functions: min(), max(), clamp()

clamp() - The Ultimate Responsive Function

/* Fluid Typography */
font-size: clamp(1rem, 2.5vw, 2rem);
/* Min 16px | Preferred 2.5% Viewport | Max 32px */

/* Responsive Padding */
padding: clamp(1rem, 5vw, 3rem);

/* Logo Size with clamp */
width: clamp(100px, 20vw, 300px);
height: clamp(100px, 20vw, 300px);

Logo Responsive Patterns

Pattern 1: Max Width Constraint (min)

.logo {
  width: min(30vw, 250px);
  height: auto;
}

Pattern 2: Min Width Constraint (max)

.logo {
  width: max(15vw, 120px);
  height: auto;
}

Pattern 3: Fluid Range (clamp) - แนะนำ

.logo {
  width: clamp(120px, 25vw, 300px);
  height: auto;
}

Modern Approach: Container Queries (Future-proof)

.logo-container {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .logo { width: 200px; }
}

@container (min-width: 600px) {
  .logo { width: 300px; }
}

/* Logo ปรับตาม Container ไม่ใช่ Viewport */

SVG Logo (Best for Responsive)

<svg class="logo" viewBox="0 0 200 100" aria-label="Company Logo">
  <!-- SVG Paths -->
</svg>

Browser Support

• min(), max(), clamp(): Chrome 79+, Firefox 75+, Safari 13.1+, Edge 79+
• IE: ไม่รองรับ (ใช้ Fallback ด้วย Media Queries)
• Container Queries: Chrome 105+, Firefox 110+, Safari 16+, Edge 105+

Fallback Strategy

.logo {
  /* Fallback */
  width: 200px;
  max-width: 30vw;
}

/* Modern */
@supports (width: min(30vw, 200px)) {
  .logo {
    width: min(30vw, 200px);
    max-width: none;
  }
}

/* หรือใช้ CSS Custom Properties */
.logo {
  --logo-width: 200px;
  width: var(--logo-width);
}
@media (max-width: 800px) {
  .logo { --logo-width: 30vw; }
}

Best Practices

• ใช้ SVG Logo สำหรับ Scalability สูงสุด (ไม่ Pixelate)
• ใช้ clamp() สำหรับ Fluid Range ที่ควบคุมได้
• ตั้ง height: auto คู่กับ width เพื่อรักษา Aspect Ratio
• เพิ่ม object-fit: contain หาก Logo เป็น <img> กำหนด Width/Height คงที่
• Test บน Device จริง: Mobile, Tablet, Desktop, Ultra-wide