css3のvhとwhの単位は何ですか?

CSS3 では、vh と wh はビューポートの単位であり、相対的な長さの単位です。 wh はビューポートを基準とした幅であり、「1vw」はビューポートの幅の「1%」に相当し、vh はビューポートを基準とした高さであり、「1vh」はビューポートの高さの「1%」に相当します。

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

CSS3 では、vh と wh はビューポートの単位であり、相対的な長さの単位です。

ビューポート ユニット

まず、ビューポートとは何かを理解する必要があります。業界で非常に尊敬されている理論は、Peter-Paul Koch (世界では「PPK マスター」として知られている) によって提唱されたビューポートの説明です - デスクトップでは、ビューポートはデスクトップを指し、ブラウザを指します。モバイル側では、より複雑で、レイアウト ビューポート、ビジュアル ビューポート、および理想ビューポートの 3 つのビューポートが関係します。ビューポート単位の「ビューポート」は間違いなくデスクトップ上のブラウザの表示領域を指しますが、モバイル側では 3 つのビューポートのうちのレイアウト ビューポートを指します。

#ビューポート単位の「ビューポート」 CSS3 仕様によれば、ビューポート単位には主に次の 4 つが含まれます。

• #vw : ビューポートの幅を基準として、1vw はビューポートの幅の 1% に相当します

• ##vh : ビューポートの高さを基準として、1vh はビューポートの高さの 1% に相当します

• vmin: vw と vh の間で最小のものを選択します

• vmax: vw と vh
  の間で最大のものを選択します

ビューポートの単位は % 単位とは異なります。ビューポートの単位はビューポートのサイズに依存し、ビューポート サイズのパーセンテージとして定義されます。一方、% 単位は要素の祖先要素に依存します。

ビューポート単位で測定され、ビューポートの幅は 100vw、高さは 100vh です (左側は垂直画面の状況、右側は水平画面の状況です)デスクトップの例 ブラウザのビューポート サイズは 650px なので、1vw = 650 * 1% = 6.5px (これは理論上の計算です。ブラウザが 0.5px をサポートしていない場合、実際のレンダリング結果は 7px になる可能性があります)。

ビューポート ユニットを使用してページを調整します

モバイル開発の場合、最も重要な点は、複数の機能を達成するためにページをどのように調整するかです。端末の互換性、さまざまな適応方法には、それぞれ長所と短所があります。主流のレスポンシブ レイアウトとフレキシブル レイアウトに関する限り、メディア クエリを通じて実装されたレイアウトでは、複数の応答ブレークポイントを設定する必要があり、それがもたらすエクスペリエンスもユーザーにとって非常に不親切です。レイアウトは応答の範囲内の解像度です。それは変化しませんが、ブレークポイントのスイッチに応答した瞬間に、カセット レコード プレーヤーが何度も「クリック」するように、レイアウトは不連続なスイッチング変化を引き起こします。柔軟なレイアウトのためにレム単位の動的な計算を使用することにより、解像度の変化を監視し、CSS と JS を結合してルート要素のフォント サイズを動的に変更するスクリプトをヘッダーに埋め込む必要があります。この問題を解決する方法はありますか?答えは「はい」です。ビューポート ユニットを使用してアダプティブ ページを実装することにより、応答性の障害の問題とスクリプトの依存関係の問題の両方を解決できます。

アプローチ 1: CSS ユニットとして vw のみを使用する

適用される唯一の CSS ユニットとして vw ユニットのみを使用するこのアプローチでは、次の条件に従います。デザインドラフトのサイズを vw 単位に変換するには、Sass 関数コンパイル

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

2 を使用します。テキストまたはレイアウトの高さ、幅、間隔など、vw が CSS 単位として使用されます

.mod_nav {
    background-color: #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);
            }
        }
    }
}

3.1 物理 ピクセル ライン (つまり、通常の画面では 1 ピクセル、高解像度の画面では 0.5 ピクセル) は、トランスフォーム属性スケールを使用して実装されます。

.mod_grid {
    position: relative;
    &::after {
        // 实现1物理像素的下边框线
        content: '';
        position: absolute;
        z-index: 1;
        pointer-events: none;
        background-color: #ddd;
        height: 1px;
        left: 0;
        right: 0;
        top: 0;
        @media only screen and (-webkit-min-device-pixel-ratio: 2) {
            -webkit-transform: scaleY(0.5);
            -webkit-transform-origin: 50% 0%;
        }
    }
    ...
}

4. アスペクト比を維持する必要がある画像の場合は、代わりにpadding-topを使用する必要があります

.mod_banner {
    position: relative;
    padding-top: percentage(100/700); // 使用padding-top
    height: 0;
    overflow: hidden;
    img {
        width: 100%;
        height: auto;
        position: absolute;
        left: 0;
        top: 0; 
    }
}

これから、次のように共通のレイアウト ページ効果を実現できます。

方法 2: vw と rem を組み合わせると、レイアウトがより最適化されます

このようなページはうまく適応されているように見えますが、ビューポート ユニットを使用して実装されていることがわかります。レイアウトは自動的に拡大縮小されます。ビューポートが大きすぎても小さすぎても、ビューポートが大きすぎたり小さすぎたりすると、最大幅と最小幅の制限も失われます。もちろん、そのような小さな不親切なユーザー エクスペリエンスを気にする必要はありませんが、それでも私たちはそのような小さな欠陥を修正するよう努めています。ということは、レムユニットを組み合わせてレイアウトを実現すれば良いのでは？ 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;
}

（学习视频分享：css视频教程、web前端入门教程）

以上がcss3のvhとwhの単位は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。