CSS における vw と vh の違い: vw ユニットはウィンドウの幅に応じてサイズを自動的に変更できます。「1vw」はウィンドウ幅の「1%」で、vh ユニットは自動的に変更できます。ウィンドウの高さに応じたサイズ。「 1vh 」はウィンドウの高さの「1%」です。
このチュートリアルの動作環境: Windows 10 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
#css における vw と vh の違いは何ですか。
css における vw と vh の違いは次のとおりです。
vw ユニットはウィンドウの幅に応じてサイズを自動的に変更できます。1vw はウィンドウ幅の 1% です。
vh ユニットは自動的にサイズを変更できます。ウィンドウの高さに応じてサイズを変更します、1vh はウィンドウの高さの 1% です;
vw は px、rem などと同様の CSS の属性であり、以下に属します長さの単位にします。ブラウザでは、1 vw = ビューポートの幅/100
この機能によると、vw はモバイル アダプティブ レイアウトの実装に役立ちます。その利点は、表示されているものがそのまま得られるということであり、rem よりも優れています。まったく使用されていないため、追加の計算を使用してください。
変数や関数を定義できるため、sass などの CSS 前処理言語と組み合わせて使用することをお勧めします。これは、vw を使用する際に非常に役立ちます。
vm、vh、vmin、vmax はウィンドウ単位および相対単位です。これは、ページの親ノードまたはルート ノードに対して相対的なものではありません。ビューポートのサイズによって決まり、単位は 1、つまり 1% 程度を意味します。ビューポートは、実際にコンテンツを表示するブラウザの領域です。つまり、ツールバーやボタンのない Web ブラウザです。
具体的な説明は次のとおりです。
vw: ウィンドウの幅の割合 (1vw はウィンドウの幅が 1% であることを意味します)
vh: ウィンドウの幅の割合ウィンドウの高さ
vmin: 現在の Vw と Vh の小さい方の値を取得します。
vmax: 現在の Vw と Vh の大きい方の値を取得します
高さの合計ビューポートの幅を基準とした vh と vw の関係。1vh はビューポートの高さの 1/100 に等しく、1vw はビューポートの幅の 1/100 に等しい。例: ブラウザの高さは 900 ピクセル、幅は 750 ピクセル、1 vh = 900 ピクセル/100 = 9 px、1vw = 750px/100 = 7.5 px 、画面と同じ高さのボックスを実現するのは簡単です。
例は次のとおりです:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>vh_CSS参考手册_web前端开发参考手册系列</title>
<style>
.p1{font-size:5vh;}
.p2{font-size:5vw;}
</style>
</head>
<body>
<p class="p1">相对于viewport高度大小的文字</p>
<p class="p2">相对于viewport宽度大小的文字</p>
</body>
</html>出力結果:
(学習ビデオ共有: css ビデオ チュートリアル)
以上がCSSのvwとvhの違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
css ul标签怎么去掉圆点Apr 25, 2022 pm 05:55 PM在css中，可用list-style-type属性来去掉ul的圆点标记，语法为“ul{list-style-type:none}”；list-style-type属性可设置列表项标记的类型，当值为“none”可不定义标记，也可去除已有标记。
css与xml的区别是什么Apr 24, 2022 am 11:21 AM区别是：css是层叠样式表单，是将样式信息与网页内容分离的一种标记语言，主要用来设计网页的样式，还可以对网页各元素进行格式化；xml是可扩展标记语言，是一种数据存储语言，用于使用简单的标记描述数据，将文档分成许多部件并对这些部件加以标识。
css3怎么实现鼠标隐藏效果Apr 27, 2022 pm 05:20 PM在css中，可以利用cursor属性实现鼠标隐藏效果，该属性用于定义鼠标指针放在一个元素边界范围内时所用的光标形状，当属性值设置为none时，就可以实现鼠标隐藏效果，语法为“元素{cursor:none}”。
rtl在css是什么意思Apr 24, 2022 am 11:07 AM在css中，rtl是“right-to-left”的缩写，是从右往左的意思，指的是内联内容从右往左依次排布，是direction属性的一个属性值；该属性规定了文本的方向和书写方向，语法为“元素{direction:rtl}”。
css怎么实现英文小写转为大写Apr 25, 2022 pm 06:35 PM转换方法：1、给英文元素添加“text-transform: uppercase;”样式，可将所有的英文字母都变成大写；2、给英文元素添加“text-transform:capitalize;”样式，可将英文文本中每个单词的首字母变为大写。
css怎么设置i不是斜体Apr 20, 2022 am 10:36 AM在css中，可以利用“font-style”属性设置i元素不是斜体样式，该属性用于指定文本的字体样式，当属性值设置为“normal”时，会显示元素的标准字体样式，语法为“i元素{font-style:normal}”。
怎么设置rotate在css3的旋转中心点Apr 24, 2022 am 10:50 AM在css3中，可以用“transform-origin”属性设置rotate的旋转中心点，该属性可更改转换元素的位置，第一个参数设置x轴的旋转位置，第二个参数设置y轴旋转位置，语法为“transform-origin:x轴位置 y轴位置”。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
PhpStorm Mac バージョン
最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
EditPlus 中国語クラック版
サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません
mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。
ホットトピック
7433
15135952