レスポンシブデザインでCSSの新しいユニットvwとvhを使用する方法-CSSチュートリアル-php.cn

レスポンシブデザインでCSSの新しいユニットvwとvhを使用する方法

高洛峰

リリース： 2017-03-23 10:53:05

オリジナル

1778 人が閲覧しました

将来のレスポンシブデザインの開発を考慮して、必要に応じてブラウザの高さをパーセント値に基づいて調整することもできます。ただし、パーセントベースの値を使用することが、ブラウザウィンドウのサイズに応じて定義する最良の方法であるとは限りません。たとえば、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 サイトの他の関連記事を参照してください。