Sử dụng hàm CSS min (), chúng tôi có thể tạo một biểu trưng đáp ứng trên các trang web của mình. Nó cho phép chúng tôi chỉ định một giá trị tối thiểu cho một thuộc tính CSS.
Cú pháp
Cú pháp của thuộc tính CSS min () như sau -
Selector {
attribute: min(/*value*/,/*value*/);
} Ví dụ
Các ví dụ sau minh họa thuộc tính CSS min ().
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: left;
height: min(40vw, 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, sit amet aliquam justo metus eu est. Praesent eleifend sodales orci, vel ornare sapien porta id. Pellentesque ipsum sem, aliquam vitae venenatis quis, lobortis vitae est. Proin a semper lectus. Nam rhoncus ipsum quis nisl porta pretium. Fusce pharetra sem in tortor aliquet fermentum. Ut facilisis luctus ipsum eu mattis.</p>
<p>
Vivamus quis velit diam. Curabitur tempus diam nec enim tincidunt posuere. Nulla nec nunc in dui aliquam congue. Nulla commodo tincidunt iaculis. Nulla egestas odio et arcu elementum euismod.
</p>
</div>
</body>
</html> Điều này cho kết quả sau
Ví dụ
<!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, sit amet aliquam justo metus eu est. Fusce pharetra sem in tortor aliquet fermentum. Ut facilisis luctus ipsum eu mattis.</p>
</body>
</html> Điều này cho kết quả sau
