精华内容
下载资源
问答
  • vw和vh单位

    2020-03-01 22:15:01
    vw和vw单位 vw和vh都是视口单位 即view width / view height 相对单位:表示把屏幕分为了100份,1份等于1% 1.vw:1vw等于视口宽度的1%。...很明显,可以看出vw和vh单位是可以在不调用JS的同时, 实...

    vw和vw单位

    vw和vh都是视口单位 即view width / view height
    相对单位:表示把屏幕分为了100份,1份等于1%
    1.vw:1vw等于视口宽度的1%。
    2.vh:1vh等于视口高度的1%。
    3.vmin:选取vw和vh中最小的那个。
    4.vmax:选取vw和vh中最大的那个。
    在这里插入图片描述
    在这里插入图片描述
    以下是不同屏幕下的占比
    在这里插入图片描述

    在这里插入图片描述
    很明显,可以看出vw和vh单位是可以在不调用JS的同时,
    实现屏幕自适应的一种方法。

    //rem是针对根元素下的font-size 的大小 1rem即为根元素下font-size大小

    展开全文
  • 微信小程序中的vw和vh单位 100vw代表手机宽度, 100vh代表手机高度。 实现代码: button{ width: 50vw; }

    微信小程序中的vw和vh单位

     

         100vw代表手机宽度,

         100vh代表手机高度。

     

    实现代码:

     

    button{
    
    width: 50vw;
    
    }

     

    展开全文
  • px就是pixel(像素)的缩写,相对长度单位,相对于屏幕分辨率。 2、em 参考物是父元素的font-size,具有继承的特点。浏览器默认字体是16px,整个页面内1em不是一个固定的值。 字体大小同样都是1.5em,但是效果却截然...
  • 编者注:在移动端中利用rem的相对于根HTML进行改变,通过一段JS实现了移动端自适应,本文则使用纯CSS视口单位来自行自适应,虽然现在的兼容性还没法完全能够接受,但不妨碍你认识这个vw和vh的强大。 响应式布局的...

    编者注:在移动端中利用rem的相对于根HTML进行改变,通过一段JS实现了移动端自适应,本文则使用纯CSS视口单位来自行自适应,虽然现在的兼容性还没法完全能够接受,但不妨碍你认识这个vw和vh的强大。

    响应式布局的实现依靠媒体查询( Media Queries )来实现,选取主流设备宽度尺寸作为断点针对性写额外的样式进行适配,但这样做会比较麻烦,只能在选取的几个主流设备尺寸下呈现完美适配。

    即使是通过 rem 单位来实现适配,也是需要内嵌一段脚本去动态计算根元素大小。

    近年来,随着移动端对视口单位的支持越来越成熟、广泛,使得我们可以尝试一种新的办法去真正地适配所有设备尺寸。

    认识视口单位( Viewport units )

    首先,我们要了解什么是视口。

    在业界,极为推崇的一种理论是 Peter-Paul Koch (江湖人称“PPK大神”)提出的关于视口的解释——在桌面端,视口指的是在桌面端,指的是浏览器的可视区域;而在移动端较为复杂,它涉及到三个视口:分别是 Layout Viewport(布局视口)、 Visual Viewport(视觉视口)、Ideal Viewport。

    而视口单位中的“视口”,在桌面端,毫无疑问指的就是浏览器的可视区域;但是在移动端,它指的则是三个 Viewport 中的 Layout Viewport 。
    在这里插入图片描述
    viewport:视口单位中的“视口”

    根据CSS3规范,视口单位主要包括以下4个:

    • vw : 1vw 等于视口宽度的1%
    • vh : 1vh 等于视口高度的1%
    • vmin : 选取 vw 和 vh 中最小的那个
    • vmax : 选取 vw 和 vh 中最大的那个

    视口单位区别于%单位,视口单位是依赖于视口的尺寸,根据视口尺寸的百分比来定义的;而%单位则是依赖于元素的祖先元素。
    vw_vh
    用视口单位度量,视口宽度为100vw,高度为100vh(左侧为竖屏情况,右侧为横屏情况)

    例如,在桌面端浏览器视口尺寸为650px,那么 1vw = 650 * 1% = 6.5px(这是理论推算的出,如果浏览器不支持0.5px,那么实际渲染结果可能是7px)。

    兼容性

    其兼容性如下图所示,可以知道:在移动端 ios 8 以上以及 Android 4.4 以上获得支持,并且在微信 x5 内核中也得到完美的全面支持。
    在这里插入图片描述截图来自Can I Use

    caniuse_viewport
    在这里插入图片描述
    截图来自X5内核-Can I Use

    利用视口单位适配页面

    对于移动端开发来说,最为重要的一点是如何适配页面,实现多终端的兼容,不同的适配方式各有千秋,也各有缺点。

    就主流的响应式布局、弹性布局来说,通过 Media Queries 实现的布局需要配置多个响应断点,而且带来的体验也对用户十分的不友好:布局在响应断点范围内的分辨率下维持不变,而在响应断点切换的瞬间,布局带来断层式的切换变化,如同卡带的唱机般“咔咔咔”地一下又一下。

    而通过采用rem单位的动态计算的弹性布局,则是需要在头部内嵌一段脚本来进行监听分辨率的变化来动态改变根元素字体大小,使得 CSS 与 JS 耦合了在一起。

    有没有办法能够解决这样的问题呢?

    答案是肯定的,通过利用视口单位实现适配的页面,是既能解决响应式断层问题,又能解决脚本依赖的问题的。

    做法一:仅使用vw作为CSS单位

    在仅使用 vw 单位作为唯一应用的一种 CSS 单位的这种做法下,我们遵守:

    1.对于设计稿的尺寸转换为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物理像素线(也就是普通屏幕下 1px ,高清屏幕下 0.5px 的情况)采用 transform 属性 scale 实现。

    .mod_grid {
        position: relative;
        &::after {
            // 实现1物理像素的下边框线
            content: '';
            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; 
        }
    }
    

    由此,我们能够实现一个常见布局的页面效果如下:
    在这里插入图片描述
    体验地址点击此处

    做法二:搭配vw和rem,布局更优化

    这样的页面虽然看起来适配得很好,但是你会发现由于它是利用视口单位实现的布局,依赖于视口大小而自动缩放,无论视口过大还是过小,它也随着视口过大或者过小,失去了最大最小宽度的限制。

    当然,你可以不在乎这样微小的不友好用户体验,但我们还是尝试下追求修复这样的小瑕疵吧。

    于是,联想到不如结合rem单位来实现布局?rem 弹性布局的核心在于动态改变根元素大小,那么我们可以通过:

    1. 给根元素大小设置随着视口变化而变化的 vw 单位,这样就可以实现动态改变其大小。
    2. 限制根元素字体大小的最大最小值,配合 body 加上最大宽度和最小宽度

    这样我们就能够实现对布局宽度的最大最小限制。因此,根据以上条件,我们可以得出代码实现如下:

    // 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;
    }
    

    这里就不再给出截图,但你可以点击此处在线地址进行体验。

    小结

    相对于做法一,个人比较推崇做法二,有以下两点原因:

    第一,做法二相对来说用户视觉体验更好,增加了最大最小宽度的限制;

    第二,更重要是,如果选择主流的rem弹性布局方式作为项目开发的适配页面方法,那么做法二更适合于后期项目从 rem 单位过渡到 vw 单位。只需要通过改变根元素大小的计算方式,你就可以不需要其他任何的处理,就无缝过渡到另一种CSS单位,更何况vw单位的使用必然会成为一种更好适配方式,目前它只是碍于兼容性的支持而得不到广泛的应用。

    展开全文
  • CSS中的vw,vh单位是什么? vw:浏览器可见视口【宽度】的百分比(1vw代表视窗【宽度】的1%) vh:浏览器可见视口【高度】的百分比(1vw代表视窗【高度】的1%) vmin:当前 vw vh 较小的一个值。 vmax:当前 vw ...

    CSS中的vw,vh单位是什么?

    • vw:浏览器可见视口【宽度】的百分比(1vw代表视窗【宽度】的1%)
    • vh:浏览器可见视口【高度】的百分比(1vw代表视窗【高度】的1%)
    • vmin:当前 vw 和 vh 较小的一个值。
    • vmax:当前 vw 和 vh 中较大的一个值。

    注:视窗可见视口 是一个意思

    vw,vh与 % 的区别是什么?

    1. % 是基于【父元素】的宽度/高度的百分比,vwvh是根据视窗的宽度/高度的百分比。
    2. 视口单位优势在于【vh】能够直接获取高度,而用 % 在没有设置 body 高度情况下,是无法正确获得可视区域的高度。

    实例之让body元素与浏览器的可见视口一样高

    body {
        font-family: 'Roboto', sans-serif;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        /* 100vh让body的高度与视口一样高 */
        height: 100vh;
        /* margin + overflow 用于隐藏body外边距造成的滚动条 */
        margin: 0;
        overflow: hidden;
    }
    
    展开全文
  • vw和vh布局

    千次阅读 2021-11-20 17:23:59
    vw/vh 是一个相对单位(类似 em rem 相对单位vw 是:viewport width 视口宽度单位 vh 是:viewport height 视口高度单位 相对视口的尺寸计算结果 1vw = 1/100 视口宽度 1vh = 1/100 视口高度 例如...
  • CSS中vw和vh单位的使用

    2016-03-15 13:24:00
    vw——viewpoint width,视窗宽度,1vw等于视窗宽度的1%; vh——viewpoint height,视窗高度,1vh等于视窗高度的1%;例子:...
  • 本文介绍了css3新单位vwvh、vmin、vmax的使用详解,分享给大家,具体如下: 1,vwvh、vmin、vmax 的含义 (1)vwvh、vmin、vmax 是一种视窗单位,也是相对单位。它相对的不是父节点或者页面的根节点。而是由...
  • vw vh的介绍 vw,vh是css3中给我们提供的新的单位,他们是相对于viewport视窗的...vh单位 vh是相对于视窗高度的单位, 1vh=1/100浏览器高度。 vw vh的用途 vw vh相对于浏览器的窗口的大小,代码如下: .div1{ width:...
  • CSS之vw和vh

    2019-12-17 17:14:42
    相对于视口的宽度,视口被均分为100单位vw h1 { font-size: 8vw; } 如果视口的宽度是200mm,那么上述代码中h1元素的字号将为16mm,即(8x200)/100 vh 说明: 相对于视口的高度。视口被均分为100单位vh ...
  • 使用vw和vh实现elementUI中el-dialog弹框高度自适应 1、视口单位(Viewport units) 视口单位中的“视口”,桌面端指的是浏览器的可视区域;移动端指的就是Viewport中的Layout Viewport。笔者简单理解为:浏览器内部的...
  • 主要介绍了css3新单位vwvh的使用教程,本文通过实例代码给大家介绍vwvh、vmin、vmax 的含义及vwvh与%百分比的区别,感兴趣的朋友一起看看吧
  • vw\vh的介绍

    2021-03-06 15:58:31
    1.1 vw和vh是前端开发中的一个动态单位,是一个相对于网页视口的单位。 1.2 系统会将视口的宽度高度分为100份,1vw占用视口宽度的百分之一,1vh占用视口高度的百分之一。 1.3 vwvh和百分比不同的是,百分比...
  • *视口单位(Viewport units)* 什么是视口? 在PC端,视口指的是在PC端,指的是浏览器的可视区域; 而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Viewport(视觉视口),...2.vh:1vh等于视口高度的1
  • 单位 vw 和单位 vh

    2020-02-19 15:36:59
    vw vh 也是相对长度单位。 1 vw = 1/100 视口宽度; 1 vh = 1/100 视口高度; 模态框的半透明覆盖层的特征即大小覆盖整个视口,现在我们用vh和vw做上面“下载chrome浏览器”的模态框的半透明覆盖层: 1 设置...
  • 刚刚入行前端开发一年,经验欠缺,在新公司独立承担一个生产管理系统的前端开发工作。该系统操作页面均为全屏,页面固定但使用机器有所不同,且用户...查阅资料后,发现了vw和vh这两个单位,终于较为完善的解决了这...
  • px就是pixel(像素)的缩写,相对长度单位,相对于屏幕分辨率。 2、em 参考物是父元素的font-size,具有继承的特点。浏览器默认字体是16px,整个页面内1em不是一个固定的值。 字体大小同样都是1.5em,但是效果却截然...
  • 这样12px=1.2em,10px=1em,也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了, em的特点 em是个相对值 他会根据父级元素的大小而变化 但是如果嵌套了多个元素 要计算它的大小,是件很头疼的事情 这样...
  • css3自适应布局单位vw,vh详解

    千次阅读 2020-10-30 16:05:38
    视口单位(Viewport units) 在桌面端,视口指的是在桌面端,指的是浏览器的可视区域;而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Viewport(视觉视口),Ideal Viewport(理想视口)。 视口...
  • 项目最初给的意见是,pc一套前端代码,wap一套代码,并没有说手机端在电脑上打开正常显示的需求。因此,我最后移动端单位用了vw/vh进行布局,没想到的是,需求变了,噩...
  • css中rem em vw vh px各自代表的含义 rem rem是css3新增的一个相对单位,rem是相对于HTML根元素的字体大小来进行计算的,如果没有设置HTML字体大小,就会以浏览器默认字体大小,一般为16px rem除了IE8及更早版本以外...
  • CSS 中的vhvw单位

    千次阅读 2019-09-30 09:36:54
    vmin:当前 vw vh 中较小的一个值 vmax:当前 vw vh 中较大的一个值 vwvh与 % 的区别: % 是相对于父元素的大小设定的比率,vwvh 是视窗大小决定的。 vwvh 优势在于能够直接获取高度,而用 % ...
  • px就是 pixel(像素)的缩写,相对长度单位,相对于屏幕分辨率; 2.em 参考父元素的font-size,具有继承的特点。浏览器默认字体是16px, 整个页面内1em不是一个固定的值; 字体大小同样都是1.5em,但是效果却截然...
  • CSS度量单位rem、em、vwvh详解

    千次阅读 多人点赞 2018-07-22 11:01:21
    CSS度量单位rem、em、vwvh详解 单位 说明 兼容性 em 相对长度单位,相对于当前对象内文本的字体尺寸, 根据父元素的大小变化而变化 良好 rem 相对长度单位,相对于跟元素( 即 html 元素)font-...
  • 当页面中所有元素都使用rem单位时,你只需要增加一小段js代码,通过监听设备尺寸来改变根元素的font-size值,那么所有元素就会按比例放大或者缩小,以此达到一套布局适应多种移动设备的目的。但这种方案有弊端(弊端...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,510
精华内容 2,204
关键字:

vw和vh单位