はじめに
長い間、アダプティブレイアウトには複雑なメディアクエリ、calc ()、動的なvwおよびvh単位が必要でした。
しかし、今、プロセス全体を大幅に簡素化できる新機能が登場しました。 view().
その仕組みと、なぜ今すぐ習得すべきなのかをお話しします！ 🚀
view ()とは何ですか？どのように機能しますか？
view() は、ブラウザのウィンドウに応じて要素のサイズを動的に計算する機能です。
構文:
view(clamp, min_value, ideal_value, max_value)min_value — 最小サイズ
ideal_value — 理想的なサイズ（ビューポートに対して）
max_value — 最大サイズ
💡 要約：目立ったジャンプなしでさまざまな画面サイズに適応する流動的なデザイン！ 📱🖱️🖥️
実例：アダプティブボックス
🌟 単一のメディアクエリなしでコンテナーのサイズが自動的に変更されるコードを書いていると想像してみてください！
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>なぜview ()は革命的なのか？
✅ CSSを簡素化：calc ()や複雑なメディアクエリは不要
✅レイアウトをより滑らかにします
✅ UXを向上：さまざまな画面サイズに対応
✅ コードの読みやすさと保守性を向上させる
ブラウザの互換性
✅最新バージョンのChromium（Chrome、Edge、Operaを含む）で動作します
⚠️ Firefoxでは部分的にサポートされています（about:configを介して有効化されます）
❌ Safariおよび古いブラウザはまだサポートされていません
互換性を確認するにはどうすればよいですか？
view() を本番環境で使用する前に、サポートを必ず確認してください。
✅ ウェブサイトで Can I Use
✅またはCSSチェックを介して：
@supports (width: view(clamp, 100px, 50vw, 500px)) {
.box {
width: view(clamp, 100px, 50vw, 500px);
}
}サポートがない場合は、clamp() または固定サイズを介してスペアオプションを追加します。
結論
機能 view() — これがレスポンシブデザインの未来です！🚀これにより、どのデバイスでも、レイアウトがより簡単、よりクリーン、より使いやすくなります。今すぐ、プロジェクトで view() を試してみて、誰よりも一歩先を行きましょう！
トレンドに乗るだけでなく、プログラミングスキルを自信を持って身につけたい場合は、当社のアプリケーションで学んでください コディック — あなたがきっと気に入る形式でプログラミングを学べます！ 🔥