資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究用 CSS 中的 min() 函式建立響應式徽標（不涉及媒體查詢）
使用 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>這將給出以下輸出
更新日期: 10-Feb-2021
233 次瀏覽
廣告