So verwenden Sie die neuen CSS3-Einheiten vw, vh, vmin und vmax
Dieses Mal zeige ich Ihnen, wie Sie die neuen CSS3-Einheiten vw, vh, vmin und vmax verwenden. Was sind die Vorsichtsmaßnahmen für die Verwendung der neuen CSS3-Einheiten vw, vh, vmin und vmax? Schauen wir uns hier praktische Fälle an.
Dieser Artikel stellt die Verwendung der neuen CSS3-Einheiten vw, vh, vmin und vmax vor und teilt sie mit allen. Die Details sind wie folgt:
1 Die Bedeutung von vw, vh, vmin und vmax
(1) vw, vh, vmin, vmax sind Fenstereinheiten und relative Einheiten. Es ist nicht relativ zum übergeordneten Knoten oder zum Stammknoten der Seite. Sie wird durch die Größe des Ansichtsfensters bestimmt. Die Einheit ist 1, was etwa 1 % bedeutet.
Der Ansichtsbereich ist der Bereich, in dem Ihr Browser tatsächlich Inhalte anzeigt – mit anderen Worten, Ihr Webbrowser ohne Symbolleisten und Schaltflächen.
(2) Die spezifische Beschreibung lautet wie folgt:
vw: der Prozentsatz der Fensterbreite (1vw stellt 1 % der Fensterbreite dar)
vh: der Prozentsatz des Fensters Höhe
vmin: aktuell Der kleinere Wert von vw und vh
vmax: Der größere Wert von aktuell vw und vh
2, die Differenz zwischen vw, vh und % Prozent
(1)% Dies ist das eingestellte Verhältnis zur Größe des übergeordneten Elements. vw und vh werden durch die Größe des Fensters bestimmt.
(2) Der Vorteil von vw und vh besteht darin, dass sie die Höhe direkt ermitteln können. Mit % kann die Höhe des visuellen Bereichs jedoch nicht korrekt ermittelt werden, ohne die Körpergröße festzulegen gut. Vorteile.
3. Verwendung von vmin und vmax
Wenn Sie bei der Entwicklung mobiler Seiten vw und wh verwenden, um die Schriftgröße festzulegen (z. B. 5vw), wird die Schriftgröße im Hoch- und Querformat angezeigt ist nicht dasselbe.
Da vmin und vmax die aktuellen kleineren vw und vh und die aktuellen größeren vw und vh sind. Hier können Sie vmin und vmax verwenden. Sorgen Sie dafür, dass die Textgröße sowohl auf horizontalen als auch auf vertikalen Bildschirmen konsistent ist.
4, Browserkompatibilität
(1) Desktop-PC
Chrome: Perfekt unterstützt seit Version 26 (Februar 2013)
Firefox: Seit Perfekt unterstützt seit Version 19 ( Januar 2013)
Safari: Perfekt unterstützt seit Version 6.1 (Oktober 2013)
Opera: Perfekt unterstützt seit Version 15 (Juli 2013)
IE: Seit IE10 (einschließlich Edge) wird es immer noch nur teilweise unterstützt (vmax wird nicht unterstützt und vm ersetzt vmin)
(2) Mobilgeräte
Android: seit Version 4.4 Perfekte Unterstützung (Dezember 2013)
iOS: Perfekte Unterstützung seit iOS8-Version (September 2014 )
2. Ein einfaches Beispiel
1, Seitencode
Neben der Einstellung der Breite und Höhe von Elementen kann die Viewport-Einheit auch im Text verwendet werden. Als nächstes legen Sie mit vw die Schriftgröße fest, um responsiven Text zu implementieren.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hangge.com</title>
<style>
html, body, div, span, h1, h2, h3 {
margin: 0;
padding: 0;
border: 0;
}
.demo {
width: 100vw;
font-size: 5vw;
margin: 0 auto;
background-color: #50688B;
color: #FFF;
}
.demo2 {
width: 80vw;
font-size: 5vw;
margin: 0 auto;
background-color: #ff6a00;
}
.demo3 {
width: 50vw;
height: 50vh;
font-size: 1vw;
margin: 0 auto;
background-color: #ff006e;
color: #FFF;
}
</style>
</head>
<body>
<div class="demo">
<h1>宽度100％, 字体5％</h1>
</div>
<div class="demo2">
<h2>宽度80％, 字体5％</h2>
</div>
<div class="demo3">
<h3>宽度50％, 高度50％, 字体1％</h3>
</div>
</body>
</html>3. Maskierungsebene, um eine vollständige Abdeckung zu erreichen
Manchmal, um das Popup-Feld hervorzuheben oder zu verhindern, dass Seitenelemente angeklickt werden. Wir benötigen eine halbtransparente Maske, die den gesamten sichtbaren Bereich abdeckt, was mit vw und vh leicht zu erreichen ist.
1, Beispielcode
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hangge.com</title>
<style>
html, body, div, span, button {
margin: 0;
padding: 0;
border: 0;
}
button {
width: 120px;
height: 30px;
color: #FFFFFF;
font-family: "微软雅黑";
font-size: 14px;
background: #28B995;
}
#mask {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
background: #000000;
opacity: 0.5;
display: none;
}
</style>
</head>
<body>
<button onclick="document.getElementById('mask').style.display='inline'">点击显示遮罩</button>
<div id="mask" onclick="document.getElementById('mask').style.display='none'"/></div>
</body>
</html>4. Implementierung einer zentrierten Popup-Box
1, die Größe der Popup-Box passt sich dem Inhalt an
(1) Beispiel-Rendering
Nachdem Sie auf die Popup-Schaltfläche geklickt haben, wird ein Popup-Feld zentriert auf dem gesamten Bildschirm angezeigt.
Die Größe des Popup-Felds passt sich der Größe des Inhalts (Logobild) an und hinter dem Popup-Feld befindet sich eine durchscheinende Maskenschicht, die den gesamten Bildschirm abdeckt.
Nachdem Sie auf die Schaltfläche „Schließen“ geklickt haben, wird das Popup-Fenster ausgeblendet.
(2) Beispielcode
Die Maskenebene verwendet vw und vh, um eine Vollbildabdeckung zu erreichen. Das Popover wird zur Maskenebene hinzugefügt und zentriert.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hangge.com</title>
<script type="text/javascript" src="js/jquery.js"></script>
<style>
html, body, div, span, button {
margin: 0;
padding: 0;
border: 0;
}
button {
width: 120px;
height: 30px;
color: #FFFFFF;
font-family: "微软雅黑";
font-size: 14px;
background: #28B995;
}
.dialog-container {
display: none;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,.35);
text-align: center;
position: fixed;
top: 0;
left: 0;
z-index: 10;
}
.dialog-container:after {
display: inline-block;
content: '';
width: 0;
height: 100%;
vertical-align: middle;
}
.dialog-box {
display: inline-block;
border: 1px solid #ccc;
text-align: left;
vertical-align: middle;
position: relative;
}
.dialog-title {
line-height: 28px;
padding-left: 5px;
padding-right: 5px;
border-bottom: 1px solid #ccc;
background-color: #eee;
font-size: 12px;
text-align: left;
}
.dialog-close {
position: absolute;
top: 5px;
right: 5px;
font-size: 12px;
}
.dialog-body {
background-color: #fff;
}
</style>
</head>
<body>
<button onclick="$('#dialogContainer').show();">点击显示弹出框</button>
<div id="dialogContainer" class="dialog-container">
<div class="dialog-box">
<div class="dialog-title">居中弹出框</div>
<a onclick="$('#dialogContainer').hide();" class="dialog-close">关闭</a>
<div class="dialog-body">
<img src="logo.png" class="demo-image" />
</div>
</div>
</div>
</body>
</html>2. Die Größe des Popup-Felds ändert sich mit der Größe des Fensters
(1) Beispielrendering
Nach dem Klicken auf die Popup-Schaltfläche , wird ein Popup-Feld zentriert auf dem gesamten Bildschirm angezeigt. Das angezeigte Popup-Feld.
Die Größe der Popup-Box wird nicht mehr durch die Größe des Inhalts bestimmt, sondern ändert sich mit der Größe des Fensters (sowohl Breite als auch Höhe betragen 80 % des sichtbaren Bereichs des Bildschirms). ).
Nachdem Sie auf die Schaltfläche „Schließen“ geklickt haben, wird das Popup-Fenster ausgeblendet.
(2) Beispielcode
Die Maskenebene verwendet vw und vh, um eine Vollbildabdeckung zu erreichen. Größe und Position der Popup-Box werden ebenfalls mit vw und vh eingestellt.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hangge.com</title>
<script type="text/javascript" src="js/jquery.js"></script>
<style>
html, body, div, span, button {
margin: 0;
padding: 0;
border: 0;
}
button {
width: 120px;
height: 30px;
color: #FFFFFF;
font-family: "微软雅黑";
font-size: 14px;
background: #28B995;
}
.dialog-container {
display: none;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,.35);
text-align: center;
position: fixed;
top: 0;
left: 0;
z-index: 10;
}
.dialog-box {
top:10vh;
left:10vw;
width: 80vw;
height: 80vh;
text-align: left;
position: absolute;
border: 1px solid #ccc;
display: flex;
flex-direction: column;
}
.dialog-title {
line-height: 28px;
padding-left: 5px;
padding-right: 5px;
border-bottom: 1px solid #ccc;
background-color: #eee;
font-size: 12px;
text-align: left;
}
.dialog-close {
position: absolute;
top: 5px;
right: 5px;
font-size: 12px;
}
.dialog-body {
background-color: #fff;
flex:1;
overflow: auto;
}
</style>
</head>
<body>
<button onclick="$('#dialogContainer').show();">点击显示弹出框</button>
<div id="dialogContainer" class="dialog-container">
<div class="dialog-box">
<div class="dialog-title">居中弹出框</div>
<a onclick="$('#dialogContainer').hide();" class="dialog-close">关闭</a>
<div class="dialog-body">
<img src="logo.png" class="demo-image" />
</div>
</div>
</div>
</body>
</html>5. Begrenzen Sie die maximale Größe bei der Anzeige großer Bilder
Wir können auch die maximale Breite oder Höhe einiger Elemente über die Ansichtseinheit begrenzen, um zu vermeiden, dass sie zu groß sind und den Bildschirm überschreiten .
(1) Klicken Sie auf die Schaltfläche, um eine große Version des Originalbilds in der Mitte des Bildschirms anzuzeigen.
(2) Wenn die ursprüngliche Breite und Höhe des Bildes 90 % der Bildschirmbreite und -höhe nicht überschreitet, wird die Standardgröße des Bildes angezeigt.
(3) Wenn die ursprüngliche Breite und Höhe des Bildes 90 % der Bildschirmbreite und -höhe überschreitet, wird es auf 90 % des Bildschirms begrenzt, damit es vollständig angezeigt werden kann.
Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Verwandte Lektüre:
So erstellen Sie einen Kreisanimationseffekt in HTML5
So verwenden Sie H5s WebGL in demselben Die Schnittstelle erstellt JSON- und Echarts-Diagramme
So verwenden Sie die neuen semantischen Tag-Funktionen von H5
Das obige ist der detaillierte Inhalt vonSo verwenden Sie die neuen CSS3-Einheiten vw, vh, vmin und vmax. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
Wie erzielt man mit reinem CSS3 einen Welleneffekt? (Codebeispiel)
Jun 28, 2022 pm 01:39 PM
Wie erzielt man mit reinem CSS3 einen Welleneffekt? In diesem Artikel erfahren Sie, wie Sie mit SVG- und CSS-Animationen Welleneffekte erstellen.
Verwenden Sie CSS geschickt, um verschiedene seltsam geformte Schaltflächen zu realisieren (mit Code).
Jul 19, 2022 am 11:28 AM
Dieser Artikel zeigt Ihnen, wie Sie mithilfe von CSS auf einfache Weise verschiedene seltsam geformte Schaltflächen realisieren können, die häufig vorkommen. Ich hoffe, dass er Ihnen hilfreich sein wird!
So verstecken Sie Elemente in CSS, ohne Platz zu beanspruchen
Jun 01, 2022 pm 07:15 PM
Zwei Methoden: 1. Fügen Sie mit dem Anzeigeattribut einfach den Stil „display:none;“ zum Element hinzu. 2. Verwenden Sie die Attribute „position“ und „top“, um die absolute Positionierung des Elements festzulegen, um das Element auszublenden. Fügen Sie dem Element einfach den Stil „position:absolute;top:-9999px;“ hinzu.
So implementieren Sie Spitzenränder in CSS3
Sep 16, 2022 pm 07:11 PM
In CSS können Sie das Attribut „border-image“ verwenden, um einen Spitzenrand zu erzielen. Das Attribut „border-image“ kann Bilder zum Erstellen von Rändern verwenden, d. h. zum Hinzufügen eines Hintergrundbilds zum Rand. Sie müssen lediglich das Hintergrundbild als Spitzenstil angeben Bildrandbreite nach innen. Ob der Anfang wiederholt wird;".
So vergrößern Sie das Bild durch Klicken mit der Maus in CSS3
Apr 25, 2022 pm 04:52 PM
Implementierungsmethode: 1. Verwenden Sie den Selektor „:active“, um den Status des Mausklicks auf das Bild auszuwählen. 2. Verwenden Sie das Transformationsattribut und die Funktion „scale()“, um den Bildvergrößerungseffekt zu erzielen. Die Syntax „img:active {transform : Skala(x-Achsen-Vergrößerung, y-Achsen-Vergrößerung);}".
Es zeigt sich, dass Textkarussell und Bildkarussell auch mit reinem CSS realisierbar sind!
Jun 10, 2022 pm 01:00 PM
Wie erstelle ich ein Textkarussell und ein Bildkarussell? Das erste, woran jeder denkt, ist die Verwendung von js. Tatsächlich können Textkarussell und Bildkarussell auch einen Blick auf die Implementierungsmethode werfen.
So legen Sie die Rotationsgeschwindigkeit der Animation in CSS3 fest
Apr 28, 2022 pm 04:32 PM
In CSS3 können Sie das Attribut „animation-timing-function“ verwenden, um die Rotationsgeschwindigkeit der Animation festzulegen. Dieses Attribut wird verwendet, um anzugeben, wie die Animation einen Zyklus abschließt und die Geschwindigkeitskurve der Animation festlegt. Animation-Timing-Funktion: Geschwindigkeitsattributwert;}".
Hat der CSS3-Animationseffekt eine Verformung?
Apr 28, 2022 pm 02:20 PM
Der Animationseffekt in CSS3 verfügt über eine Verformung. Sie können „Animation: Animationsattribut @keyframes ..{..{transform: Transformationsattribut}}“ verwenden, um den Animationsstil festzulegen Das Transformationsattribut wird zum Festlegen des Verformungsstils verwendet.
