Einleitung
Adaptive Layouts erforderten lange Zeit komplexe Media Queries, calc() und dynamische Einheiten vw und vh.
Aber jetzt gibt es eine neue Funktion, die den gesamten Prozess erheblich vereinfachen kann — view().
Ich werde Ihnen sagen, wie es funktioniert und warum Sie es bereits beherrschen sollten! 🚀
Was ist view() und wie funktioniert es?
view() - ist eine Funktion, die die Größe der Elemente abhängig vom Browserfenster dynamisch berechnet.
Syntax:
view(clamp, min_value, ideal_value, max_value)min_value — Mindestgröße
ideal_value — ideale Größe (relativ zum Viewport)
max_value — maximale Größe
💡 Fazit: Fluid Design, das sich ohne merkliche Sprünge an verschiedene Bildschirmgrößen anpasst! 📱🖱️🖥️
Praktisches Beispiel: Adaptive Box
🌟 Stellen Sie sich vor, Sie schreiben Code, bei dem der Container automatisch die Größe ändert, ohne eine einzige Media Query!
HTML + CSS:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Демо CSS view()</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #222;
color: white;
text-align: center;
}
.box {
width: view(clamp, 150px, 50vw, 600px);
height: view(clamp, 150px, 30vh, 400px);
background: linear-gradient(135deg, #ff8a00, #e52e71);
display: flex;
justify-content: center;
align-items: center;
border-radius: 20px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease-in-out;
}
.box span {
font-size: view(clamp, 1rem, 3vw, 2rem);
font-weight: bold;
}
</style>
</head>
<body>
<div class="box">
<span>Измените размер окна! 🎯</span>
</div>
</body>
</html>Warum ist view() eine Revolution?
✅ Vereinfacht CSS: calc() und komplexe Media Queries sind nicht mehr erforderlich
✅ Erzeugt ein flüssigeres Layout
✅ Verbessert die UX: Es gibt keine Probleme mit unterschiedlichen Bildschirmgrößen
✅ Macht den Code lesbarer und wartbarer
Browserkompatibilität
✅ Funktioniert in den neuesten Versionen von Chromium (einschließlich Chrome, Edge, Opera)
⚠️ Teilweise Unterstützung in Firefox (aktiviert über about:config)
❌ Safari und alte Browser werden noch nicht unterstützt
Wie überprüft man die Kompatibilität?
Vor der Verwendung von view() in der Produktion müssen Sie unbedingt die Unterstützung überprüfen:
✅ Auf der Website Can I Use
✅ Oder durch CSS-Überprüfung:
@supports (width: view(clamp, 100px, 50vw, 500px)) {
.box {
width: view(clamp, 100px, 50vw, 500px);
}
}Wenn kein Support verfügbar ist, fügen Sie eine Ersatzoption über clamp() oder feste Größen hinzu.
Befund
Funktion view() - das ist die Zukunft des responsiven Designs! 🚀 Es macht das Layout einfacher, sauberer und benutzerfreundlicher auf allen Geräten. Es lohnt sich, jetzt mit view() in deinen Projekten zu experimentieren, um allen einen Schritt voraus zu sein!
Und wenn Sie nicht nur im Trend liegen, sondern auch Ihre Programmierkenntnisse sicher entwickeln möchten, lernen Sie mit unserer App Kodik – Programmierunterricht in einem Format, das Ihnen bestimmt gefallen wird! 🔥