css3ユニットvwとvhの使用について

この記事では主に CSS3 の新しい単位 vw と vh の使用方法のチュートリアルを紹介します。この記事ではサンプルコードを使用して、vw、vh、vmin、vmax の意味と、vw、vh、% の割合の違いを紹介します。興味のある方はぜひご覧ください。見てください

レスポンシブなレイアウト ユニットの場合、最初に rem ユニットを使用して適応を実装することを考えますが、要素のサイズを動的に計算するスクリプトを埋め込む必要もあります。

例:

(function (doc, win) {
  let docEl = doc.documentElement
  let resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
  let recalc = function () {
    var clientWidth = docEl.clientWidth
    if (!clientWidth) return
    docEl.style.fontSize = 14 * (clientWidth / 320) + 'px'
  }
  if (!doc.addEventListener) return
  win.addEventListener(resizeEvt, recalc, false)
  doc.addEventListener('DOMContentLoaded', recalc, false)
})(document, window)

JS と CSS を組み合わせる必要のないユニットはありますか?答えは「はい」です、それは vw/vh です。

vw = view width
vh = view height

これら 2 つのユニットは CSS3 で導入され、上記ではビューポート ユニットと呼ばれており、ブラウザ ウィンドウに近いサイズを定義できるようになります。

vw、vh、vmin、vmaxの意味

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

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

(2) 具体的な記述は以下の通りです:

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

• vh: ウィンドウの高さのパーセンテージ

• vmin: 現在のvwとvhの小さい方の値

• vmax: 現在のvwとvhの大きい方の値

vw、vhと%パーセントの差

(1) %は親要素に対する相対的なサイズ設定 vw と vh の比率はウィンドウのサイズによって決まります。

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

vminとvmaxの使い方

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

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

ブラウザの互換性

(1) デスクトップ PC

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

• Firefox: バージョン 19 (2013 年 1 月) 以降完全にサポート

• サファリ: バージョン 6.1 (2013 年 10 月) から完全にサポートされています

• Opera: バージョン 15 (2013 年 7 月) から完全にサポートされています

IE: IE10 (Edge を含む) 以降、部分的にのみサポートされています (vmax はサポートされていません) 、vm は vmin を置き換えます)

(2) モバイルデバイス

Android: バージョン 4.4 (2013 年 12 月) 以降完全にサポート

iOS: iOS8 バージョン (2014 年 9 月) 以降完全にサポート

ビューポートを使用してページを適応させる方法単位

CSS 単位として vw のみを使用します

1. デザインドラフトのサイズに応じて vw 単位に変換します (SASS 関数のコンパイル)

//iPhone 6尺寸作为设计稿基准
$vm_base: 375;
@function vm($px) {
    @return ($px / 375) * 100vw;
}

2. テキストまたはレイアウトの高さ、幅、に vw を使用します。間隔など

            
                
                    
                
                    
                    导航入口
                
            

.mod_nav {
    background: #fff;
    &_list {
        display: flex;
        padding: vm(15) vm(10) vm(10);
        &_item {
            flex: 1;
            text-align: center;
            font-size: vm(10);
            &_logo {
                display: block;
                margin: 0 auto;
                width: vm(40);
                height: vm(40);
                img {
                    display: block;
                    margin: 0 auto;
                    max-width: 100%;
                }
            }
            &_name {
                margin-top: vm(2);
            }
        }
    }
}

これを行うための最良の方法は、vw と rem を組み合わせることです

vm を CSS ユニットコードとして使用すると、コードの量が大幅に削減されますが、次を使用して実装されていることがわかります。ビューポート単位、ビューポート サイズに応じて自動的に拡大縮小し、最大幅と最小幅の制限がなくなりました。

ということは、レムユニットを組み合わせてレイアウトを実現すれば良いのでは？ rem フレキシブル レイアウトの核心は、ルート要素のサイズを動的に変更することです。次に、ビューポートの変更に応じて変更されるルート要素のサイズの vw 単位を設定し、そのサイズを動的に変更できるようにします。かわった。

ルート要素のフォントサイズの最大値と最小値を制限し、本文に最大幅と最小幅を加えたものと連携します

このようにして、レイアウト幅の最大値と最小値の制限を実現できます。したがって、上記の条件に基づいて、コードの実装は次のように結論付けることができます:

// rem 单位换算：定为 75px 只是方便运算，750px-75px、640-64px、1080px-108px，如此类推
$vm_fontsize: 75; // iPhone 6尺寸的根元素大小基准值
@function rem($px) {
     @return ($px / $vm_fontsize ) * 1rem;
}
// 根元素大小使用 vw 单位
$vm_design: 750;
html {
    font-size: ($vm_fontsize / ($vm_design / 2)) * 100vw;
    // 同时，通过Media Queries 限制根元素最大最小值
    @media screen and (max-width: 320px) {
        font-size: 64px;
    }
    @media screen and (min-width: 540px) {
        font-size: 108px;
    }
}
// body 也增加最大最小宽度限制，避免默认100%宽度的 block 元素跟随 body 而过大过小
body {
    max-width: 540px;
    min-width: 320px;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

关于CSS代码如何书写规范

以上がcss3ユニットvwとvhの使用についての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。