What is the difference between vw and vh in css-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

What is the difference between vw and vh in css

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Dec 10, 2021 pm 05:53 PM

css

The difference between vw and vh in CSS: the vw unit can automatically change the size according to the width of the window, "1vw" is "1%" of the window width; the vh unit can automatically change the size according to the height of the window, " 1vh" is "1%" of the window height.

What is the difference between vw and vh in css

The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.

#What is the difference between vw and vh in css

In css, the difference between vw and vh is:

The vw unit can automatically change the size according to the width of the window, 1vw is 1% of the window width;
The vh unit can automatically change the size according to the height of the window, 1vh is 1% of the window height;

vw is an attribute of css, similar to px, rem, etc., and belongs to the length unit. In the browser, 1 vw = width of viewport/100

According to this feature, vw can help us implement mobile adaptive layout. Its advantage is that what you see is what you get, even better than rem, because it is not used at all. Use additional calculations.

It is recommended to use it with CSS preprocessing languages such as sass and less, because it can define variables and functions, which will provide great help in using vw.

vm, vh, vmin, vmax are window units and relative units. It is not relative to the parent node or the root node of the page. It is determined by the size of the viewport. The unit is 1, which means something like 1%. The viewport is the area of your browser that actually displays content—in other words, your web browser without toolbars and buttons.

The specific description is as follows:

vw: The percentage of the window width (1vw means the width of the window is 1%)

vh: The percentage of the window height

vmin: Take the smaller value of the current Vw and Vh

vmax: Take the larger value of the current Vw and Vh

The sum of the heights of vh and vw relative to the viewport Width, 1vh is equal to 1/100 of the viewport height, 1vw is equal to 1/100 of the viewport width. For example: browser height is 900px, width is 750px, 1 vh = 900px/100 = 9 px, 1vw = 750px/100 = 7.5 px , it is easy to realize a box with the same height as the screen.

The example is as follows:

<!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>

Output result:

What is the difference between vw and vh in css

(Learning video sharing: css video tutorial)

The above is the detailed content of What is the difference between vw and vh in css. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

The Ultimate Guide to Linking CSS Files in HTMLMay 13, 2025 am 12:02 AM

Linking CSS files to HTML can be achieved by using elements in part of HTML. 1) Use tags to link local CSS files. 2) Multiple CSS files can be implemented by adding multiple tags. 3) External CSS files use absolute URL links, such as. 4) Ensure the correct use of file paths and CSS file loading order, and optimize performance can use CSS preprocessor to merge files.

CSS Flexbox vs Grid: a comprehensive reviewMay 12, 2025 am 12:01 AM

Choosing Flexbox or Grid depends on the layout requirements: 1) Flexbox is suitable for one-dimensional layouts, such as navigation bar; 2) Grid is suitable for two-dimensional layouts, such as magazine layouts. The two can be used in the project to improve the layout effect.

How to Include CSS Files: Methods and Best PracticesMay 11, 2025 am 12:02 AM

The best way to include CSS files is to use tags to introduce external CSS files in the HTML part. 1. Use tags to introduce external CSS files, such as. 2. For small adjustments, inline CSS can be used, but should be used with caution. 3. Large projects can use CSS preprocessors such as Sass or Less to import other CSS files through @import. 4. For performance, CSS files should be merged and CDN should be used, and compressed using tools such as CSSNano.

Flexbox vs Grid: should I learn them both?May 10, 2025 am 12:01 AM

Yes,youshouldlearnbothFlexboxandGrid.1)Flexboxisidealforone-dimensional,flexiblelayoutslikenavigationmenus.2)Gridexcelsintwo-dimensional,complexdesignssuchasmagazinelayouts.3)Combiningbothenhanceslayoutflexibilityandresponsiveness,allowingforstructur

Orbital Mechanics (or How I Optimized a CSS Keyframes Animation)May 09, 2025 am 09:57 AM

What does it look like to refactor your own code? John Rhea picks apart an old CSS animation he wrote and walks through the thought process of optimizing it.

CSS Animations: Is it hard to create them?May 09, 2025 am 12:03 AM

CSSanimationsarenotinherentlyhardbutrequirepracticeandunderstandingofCSSpropertiesandtimingfunctions.1)Startwithsimpleanimationslikescalingabuttononhoverusingkeyframes.2)Useeasingfunctionslikecubic-bezierfornaturaleffects,suchasabounceanimation.3)For

@keyframes CSS: The most used tricksMay 08, 2025 am 12:13 AM

@keyframesispopularduetoitsversatilityandpowerincreatingsmoothCSSanimations.Keytricksinclude:1)Definingsmoothtransitionsbetweenstates,2)Animatingmultiplepropertiessimultaneously,3)Usingvendorprefixesforbrowsercompatibility,4)CombiningwithJavaScriptfo

CSS Counters: A Comprehensive Guide to Automatic NumberingMay 07, 2025 pm 03:45 PM

CSSCountersareusedtomanageautomaticnumberinginwebdesigns.1)Theycanbeusedfortablesofcontents,listitems,andcustomnumbering.2)Advancedusesincludenestednumberingsystems.3)Challengesincludebrowsercompatibilityandperformanceissues.4)Creativeusesinvolvecust

See all articles