ホームページ > 記事 > ウェブフロントエンド > レスポンシブデザインでCSSの新しいユニットvwとvhを使用する方法
レスポンシブデザインでCSSの新しいユニットvwとvhを使用する方法
- 高洛峰オリジナル
- 2017-03-23 10:53:051677ブラウズ
将来のレスポンシブデザインの開発を考慮して、必要に応じてブラウザの高さをパーセント値に基づいて調整することもできます。ただし、パーセントベースの値を使用することが、ブラウザ ウィンドウのサイズに応じて定義する最良の方法であるとは限りません。たとえば、CSS3 で導入された新しい単位は、この問題を明確に解決します。 。
css3 によって導入された「vw」と「vh」は、ウィンドウ サイズに対する相対的な幅/高さに基づいています。「vw」 = 「ビューの幅」、「vh」 = 「ビューの高さ」上記ではビュー ウィンドウと呼ばれます。この単位を使用すると、ブラウザ ウィンドウのサイズを定義するために近くを参照できるようになります。 デモのケースを参照して、次の 4 つのコンテナーの CSS スタイルを比較してください:
.demo {
width: 100vw;
font-size: 10vw; /* 宽度为窗口100%， 字体大小为窗口的10% */
}
.demo2 {
width: 80vw;
font-size: 8vw; /* 宽度为窗口80%， 字体大小为窗口的8% */
}
.demo3 {
width: 50vw;
font-size: 5vw; /* 宽度为窗口50%， 字体大小为窗口的5% */
}
.demo4 {
width: 10vw;
height: 50vh; /* 宽度为窗口10%， 容器高度为窗口的50% */
}
html代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link href="test.css" rel="stylesheet" type="text/css" />
</head>
<div class="demo">1</div>
<div class="demo2">2</div>
<div class="demo3">3</div>
<div class="demo4">4</div>
</html>デモ ウィンドウを縮小して、さまざまなサイズでの変更を確認できます。現在、この CSS3 アプリケーションはすべての主要なブラウザをサポートしており、IE は 10 以降である必要があります。
以上がレスポンシブデザインでCSSの新しいユニットvwとvhを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。