This article mainly introduces the usage tutorial of css3 new units vw and vh. This article introduces the meaning of vw, vh, vmin, vmax and the difference between vw, vh and % percentage through example code. Friends who are interested can join us. Let’s take a look

For responsive layout units, we will first think of using rem units to implement adaptation, but it also needs to embed a script to dynamically calculate and element size.

For example:

(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)

Is there a unit that does not require JS and CSS to be coupled together? The answer is yes, it is vw/vh.

vw?=?view?width
vh?=?view?height

These two units were introduced in CSS3. The above called viewport units allow us to define the size closer to the browser window.

The meaning of vw, vh, vmin, vmax

(1) vw, vh, vmin, vmax is a window unit and a relative unit. 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 where your browser actually displays content—in other words, your web browser without toolbars and buttons.

(2) The specific description is as follows:

• vw: the percentage of the window width (1vw represents the width of the window as 1%)

• vh: The percentage of the window height

• vmin: The smaller of the current vw and vh

• vmax: The current vw and vh The larger value in vh

The difference between vw, vh and % percentage

(1)% is the size relative to the parent element The set ratios, vw and vh, are determined by the window size.

(2) The advantage of vw and vh is that they can directly obtain the height. However, using % cannot correctly obtain the height of the visible area without setting the body height, so this is a good advantage.

Use of vmin and vmax

When doing mobile page development, if you use vw and wh to set the font size (such as 5vw), in the vertical screen The font size displayed in landscape mode is different.

Since vmin and vmax are the current smaller vw and vh and the current larger vw and vh. Here you can use vmin and vmax. Make the text size consistent in both horizontal and vertical screens.

Browser Compatibility

(1) Desktop PC

• Chrome: since version 26 Perfectly supported since version 19 (February 2013)

• Firefox: Perfectly supported since version 19 (January 2013)

• Safari : Fully supported since version 6.1 (October 2013)

• Opera : Fully supported since version 15 (July 2013)

IE: Since IE10 (including Edge), it is only partially supported (vmax is not supported, and vm replaces vmin)

(2) Mobile devices

Android: Since version 4.4 Perfect support since (December 2013)

iOS: Perfect support since iOS8 version (September 2014)

How to use viewport unit adaptation Page

Only use vw as CSS unit

1. Convert to vw unit according to the size of the design draft (SASS function compilation)

//iPhone?6尺寸作為設(shè)計稿基準(zhǔn)
$vm_base:?375;
@function?vm($px)?{
????@return?($px?/?375)?*?100vw;
}

2. Use vw

< p class="mod_nav">
????????????< nav class="mod_nav_list" v-for="n in 5">
????????????????< a href="#" class="mod_nav_list_item">
????????????????????< span class="mod_nav_list_item_logo">
????????????????< img src="http://jdc.jd.com/img/80">
????????????????????< /span>
????????????????????< p class="mod_nav_list_item_name">導(dǎo)航入口< /p>
????????????????< /a>
????????????< /nav>
< /p>
.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);
????????????}
????????}
????}
}

for both text and layout height, width, spacing, etc. The best practice is to match vw and rem

Using vm as the css unit does reduce the amount of code a lot, but you will find that it is implemented using the viewport unit, automatically scaling depending on the viewport size, and losing the maximum and minimum width restrictions.

So, I thought it would be better to combine the rem unit to realize the layout? The core of rem flexible layout is to dynamically change the size of the root element. Then we can set the vw unit for the size of the root element that changes with the change of the viewport through:

, so that its size can be dynamically changed.

Limit the maximum and minimum font size of the root element, and use the body plus the maximum width and minimum width

In this way, we can achieve the maximum and minimum restrictions on the layout width. Therefore, based on the above conditions, we can conclude that the code implementation is as follows:

//?rem?單位換算：定為?75px?只是方便運(yùn)算，750px-75px、640-64px、1080px-108px，如此類推
$vm_fontsize:?75;?//?iPhone?6尺寸的根元素大小基準(zhǔn)值
@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?也增加最大最小寬度限制，避免默認(rèn)100%寬度的?block?元素跟隨?body?而過大過小
body?{
????max-width:?540px;
????min-width:?320px;
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，更多相關(guān)內(nèi)容請關(guān)注PHP中文網(wǎng)！

相關(guān)推薦：

關(guān)于CSS代碼如何書寫規(guī)范

The above is the detailed content of About the use of css3 units vw and vh. For more information, please follow other related articles on the PHP Chinese website!