使用 CSS min() 函数创建响应式徽标(无需媒体查询)

cssweb developmentfront end technology更新于 2024/5/16 9:16:17

使用 CSS min() 函数，我们可以在网页中创建响应式徽标。它允许我们为 CSS 属性指定最小值。

语法

CSS min() 属性的语法如下 −

Selector {
   attribute: min(/*value*/,/*value*/);
}

示例

以下示例说明了 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>

这将给出以下输出

示例

<!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>

这将给出以下输出