css3のvhとwhの単位は何ですか?-フロントエンドQ&A-php.cn

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

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

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

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

ビューポートユニット

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

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

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

#vw : ビューポートの幅を基準として、1vw はビューポートの幅の 1% に相当します
##vh : ビューポートの高さを基準として、1vh はビューポートの高さの 1% に相当します
vmin: vw と vh の間で最小のものを選択します
vmax: vw と vh
の間で最大のものを選択します

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

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

ビューポート単位で測定され、ビューポートの幅は 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: &#39;&#39;;
        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 サイトの他の関連記事を参照してください。