ホームページ >ウェブフロントエンド >CSSチュートリアル >css3 の新しい単位 vw、vh、vmin、vmax の使用方法

css3 の新しい単位 vw、vh、vmin、vmax の使用方法

php中世界最好的语言オリジナル: 2018-01-30 10:25:352487ブラウズ

今回は、新しい css3 ユニット vw、vh、vmin、vmax の使い方をお届けします。新しい css3 ユニット vw、vh、vmin、vmax を使用する際の注意事項とは何か。一度見てみましょう。

この記事は、css3 の新しい単位 vw、vh、vmin、vmax の使用方法の詳細な説明を紹介し、それを皆さんと共有します。詳細は次のとおりです:

1、vw、vh、vmin、vmax の意味

(1) vw、vh、vmin、vmax はウィンドウ単位および相対単位です。これは、ページの親ノードまたはルートノードに対して相対的なものではありません。ビューポートのサイズによって決まります。単位は 1、つまり 1% 程度を意味します。

ビューポートは、ブラウザーが実際にコンテンツを表示する領域です。つまり、ツールバーやボタンのない Web ブラウザーです。

(2) 具体的な説明は次のとおりです。

vw: ウィンドウの幅のパーセンテージ (1vw はウィンドウの幅の 1% を表します)

vh: ウィンドウの高さのパーセンテージ
vmin: ウィンドウの幅の小さい方現在の vw と vh
vmax: 現在の vw と vh の大きい方の値

2、vw、vh と % の差

(1) % は、親要素 vw と vw のサイズを基準にして設定された比率です。 vh はウィンドウのサイズによって決まります。

(2) vw と vh の利点は高さを直接取得できることですが、% を使用すると、体の高さを設定しないと
視覚領域の高さを正確に取得できないため、これは良い利点です。

3. vmin と vmax の使用法

モバイルページを開発する場合、vw と wh を使用してフォントサイズ (5vw など) を設定すると、縦モードと横モードで表示されるフォントサイズが異なります。

vmin と vmax は、現在の小さい方の vw と vh と、現在の大きい方の vw と vh であるため。ここでは vmin と vmax を使用できます。横画面でも縦画面でも文字サイズを一定にします。

4、ブラウザの互換性

(1) デスクトップ PC

Chrome: バージョン 26 (2013 年 2 月) から完全にサポート

Firefox: バージョン 19 (2013 年 1 月) から完全にサポート
Safari : バージョン 6.1 (2013 年 10 月) から完全にサポート
Opera: バージョン 15 (2013 年 7 月) 以降完全にサポートされています
IE: IE10 (Edge を含む) 以降はまだ部分的にのみサポートされています (vmax はサポートされていません)、vm が vmin を置き換えます)

(2) モバイルデバイス

Android:バージョン 4.4 (2013 年 12 月) から完全にサポートされています

iOS: iOS8 バージョン (2014 年 9 月) から完全にサポートされています

2. 簡単な例

1、ページコード

ビューポートユニットは、ページの幅と高さを設定するために使用できるだけではありません。要素だけでなく、テキスト内でも使用できます。次に、vw を使用してフォントサイズを設定し、レスポンシブテキストを実装します。

<!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. 完全にカバーするためにレイヤーをマスクします

場合によっては、ポップアップボックスを強調表示したり、ページ要素がクリックされないようにしたりします。可視領域全体をカバーする半透明のマスクが必要ですが、これは vw と vh を使用して簡単に実現できます。

1、サンプルコード

<!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(&#39;mask&#39;).style.display=&#39;inline&#39;">点击显示遮罩</button>
      <div id="mask" onclick="document.getElementById(&#39;mask&#39;).style.display=&#39;none&#39;"/></div>
  </body>
</html>

4. 中央揃えのポップアップボックスを実装します

1、ポップアップボックスのサイズはコンテンツに適応します

(1) サンプルレンダリング

ポップアップボタンをクリックした後を選択すると、画面中央の A ポップアップ全体にポップアップボックスが表示されます。

ポップアップボックスのサイズはコンテンツ (ロゴ画像) のサイズに応じて適応され、ポップアップボックスの後ろには画面全体を覆う半透明のマスクレイヤーがあります。

閉じるボタンをクリックすると、ポップアップボックスが非表示になります。

(2) サンプルコード

マスクレイヤーはvwとvhを使用して全画面をカバーします。ポップオーバーがマスクレイヤーに追加され、中央に配置されます。

<!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: &#39;&#39;;
        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="$(&#39;#dialogContainer&#39;).show();">点击显示弹出框</button>
      <div id="dialogContainer" class="dialog-container">
          <div class="dialog-box">
              <div class="dialog-title">居中弹出框</div>
              <a onclick="$(&#39;#dialogContainer&#39;).hide();" class="dialog-close">关闭</a>
              <div class="dialog-body">
                <img src="logo.png" class="demo-image" />
              </div>
          </div>
      </div>
  </body>
</html>

2. ウィンドウのサイズに合わせてポップアップボックスのサイズが変わります

(1) 描画サンプル

ポップアップボタンをクリックすると、画面全体の中央にポップアップボックスが表示されます。。

ポップアップボックスのサイズはコンテンツのサイズによって決まるのではなく、ウィンドウのサイズによって変わります (幅と高さは両方とも画面の表示領域の 80%)。

閉じるボタンをクリックすると、ポップアップボックスが非表示になります。

(2) サンプルコード

マスクレイヤーはvwとvhを使用して全画面をカバーします。ポップアップボックスのサイズと位置も vw と vh を使用して設定されます。

<!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="$(&#39;#dialogContainer&#39;).show();">点击显示弹出框</button>
      <div id="dialogContainer" class="dialog-container">
          <div class="dialog-box">
              <div class="dialog-title">居中弹出框</div>
              <a onclick="$(&#39;#dialogContainer&#39;).hide();" class="dialog-close">关闭</a>
              <div class="dialog-body">
                <img src="logo.png" class="demo-image" />
              </div>
          </div>
      </div>
  </body>
</html>

5. 大きな画像を表示する際の最大サイズを制限する

大きすぎて画面を超えないよう、ビューユニットを通じて一部の要素の最大幅または高さを制限することもできます。

(1) ボタンをクリックすると、元画像が画面中央に大きく表示されます。

(2) 画像の元の幅と高さが画面の幅と高さの 90% を超えない場合、画像のデフォルトサイズが表示されます。
(3) 画像の元の幅と高さが画面の幅と高さの 90% を超える場合、完全に表示できるように画面の 90% に制限されます。

これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。