About the use of css3 units vw and vh-CSS Tutorial-php.cn

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)

Copy after login

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

Copy after login

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尺寸作为设计稿基准
$vm_base: 375;
@function vm($px) {
    @return ($px / 375) * 100vw;
}

Copy after login

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">导航入口< /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);
            }
        }
    }
}

Copy after login

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 只是方便运算，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;
}

Copy after login

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！