CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSS min（）関数を使用したレスポンシブロゴの作成（メディアクエリは含まれません）

CSS min（）関数を使用して、Webページにレスポンシブロゴを作成できます。 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>

これにより、次の出力が得られます

CSS min（）関数を使用したレスポンシブロゴの作成（メディアクエリは含まれません）

CSS min（）関数を使用したレスポンシブロゴの作成（メディアクエリは含まれません）

例

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

これにより、次の出力が得られます

CSS min（）関数を使用したレスポンシブロゴの作成（メディアクエリは含まれません）

CSS min（）関数を使用したレスポンシブロゴの作成（メディアクエリは含まれません）


  1. CSSを使用してレスポンシブな証言を作成するにはどうすればよいですか？

    CSSを使用してレスポンシブな証言を作成するためのコードは、次のとおりです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana,

  2. CSSを使用してレスポンシブブログレイアウトを作成するにはどうすればよいですか？

    CSSを使用してレスポンシブブログレイアウトを作成するためのコードは次のとおりです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>    * {       box-sizing: border-box;    }    body {