Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Creating a Responsive Logo with CSS min() Function (No Media Query Involved)
The CSS min() function allows us to create responsive logos that automatically adapt to different screen sizes without using media queries. It compares multiple values and uses the smallest one, making it perfect for creating logos that scale down on smaller screens while maintaining a maximum size on larger screens.
Syntax
selector {
property: min(value1, value2, ...);
}
How It Works
The min() function evaluates multiple values and applies the smallest one. For responsive logos, we typically combine a viewport unit (like vw) with a fixed unit (like px) to create a logo that scales with the viewport but never exceeds a maximum size.
Example 1: Responsive Logo with Height Control
This example creates a logo that scales based on viewport width but maintains readability by limiting the maximum height −
<!DOCTYPE html>
<html>
<head>
<style>
.logo-container {
padding: 20px;
}
.responsive-logo {
height: min(15vw, 120px);
width: auto;
display: block;
}
.content {
margin-top: 20px;
line-height: 1.6;
}
</style>
</head>
<body>
<div class="logo-container">
<img src="/css/images/logo.png" alt="Company Logo" class="responsive-logo">
<div class="content">
<h2>Welcome to Our Company</h2>
<p>This logo automatically adjusts its size based on the screen width while maintaining optimal readability.</p>
</div>
</div>
</body>
</html>
A responsive logo that scales between 15% of viewport width and a maximum of 120px height, with accompanying text below.
Example 2: Responsive Logo with Width Control
This example demonstrates width-based responsive behavior with a decorative container −
<!DOCTYPE html>
<html>
<head>
<style>
.header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 30px;
text-align: center;
color: white;
}
.logo {
width: min(25vw, 200px);
height: auto;
margin-bottom: 15px;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.tagline {
font-size: 1.2em;
margin: 0;
}
</style>
</head>
<body>
<div class="header">
<img src="/css/images/logo.png" alt="Brand Logo" class="logo">
<p class="tagline">Innovation at Every Pixel</p>
</div>
</body>
</html>
A centered logo with gradient background that scales between 25% of viewport width and a maximum of 200px width, with a tagline below.
Key Benefits
| Benefit | Description |
|---|---|
| No Media Queries | Single declaration handles all screen sizes |
| Smooth Scaling | Logo scales continuously with viewport |
| Performance | Fewer CSS rules mean faster rendering |
| Maintainable | One rule to update instead of multiple breakpoints |
Conclusion
The CSS min() function provides an elegant solution for responsive logos without media queries. By combining viewport units with fixed maximum values, you can create logos that scale beautifully across all devices while maintaining design integrity.
345 Views
