精华内容
下载资源
问答
  • 在css中,vw是一个长度单位,一个视口单位,是指相...(推荐教程:CSS视频教程)视口单位(Viewport units)什么是视口?在PC端,视口指的是在PC端,指的是浏览器的可视区域;而在移动端,它涉及3个视口:Layout Viewpor...

    在css中,vw是一个长度单位,一个视口单位,是指相对于视口的宽度;视口会被均分为100单位的vw,则1vw等于视口宽度的1%,比如浏览器的宽度为1920px,则“1vw=1920px/100=19.2px”。

    6f8a5069f1c4527252b2958e4565b1a5.png

    (推荐教程:CSS视频教程)

    视口单位(Viewport units)

    什么是视口?

    在PC端,视口指的是在PC端,指的是浏览器的可视区域;

    而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Viewport(视觉视口),Ideal Viewport(理想视口)。

    视口单位中的“视口”,PC端指的是浏览器的可视区域;移动端指的就是Viewport中的Layout Viewport。

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

    1.vw:相对于视口的宽度, 视口被均分为 100 单位的vw,1vw等于视口宽度的1%。

    2.vh:相对于视口的宽度, 视口被均分为 100 单位的vh,1vh等于视口高度的1%。

    3.vmin:选取vw和vh中最小的那个。

    4.vmax:选取vw和vh中最大的那个。

    vw 和 vh

    全称是 Viewport Width 和 Viewport Height,视窗的宽度和高度,相当于屏幕宽度和高度的 1%。

    vh and vw:相对于视口的高度和宽度,而不是父元素的(CSS百分比是相对于包含它的最近的父元素的高度和宽度)。1vh 等于1/100的视口高度,1vw 等于1/100的视口宽度。

    比如:浏览器高度950px,宽度为1920px, 1 vh = 950px/100 = 9.5 px,1vw = 1920px/100 =19.2 px。

    vh/vw与%区别

    fe7dc7e50cd5ff9440b76c9b086df930.png

    代码:

    body{background-color:orange;}

    .p{width:50vw;height:50vh;background-color:pink;fontsize:3em;}

    P 标签的宽度为 50vw

    效果:

    74eaba95b605e05973002e53f184f1f3.png

    说明:

    1 个 vw 相当于页面宽度的 1%,比如页面宽度是 1000px,那么 1vw

    就是 10px,vh 同理。

    P 标签的宽度是 50vw,所以就是页面宽度的 50%,高度是 50vh,所以就

    是页面高度的 50%。

    更多编程相关知识,请访问:编程学习!!

    展开全文
  • vw单位vw是css的一个属性,和px,rem等类似,属于长度单位。在浏览器中, 1 vw = viewport 的宽度 /100根据这个特性,vw 可以帮助我们实现移动端自适应布局,其优点在于所见即所得,甚至优于rem,因为完全不用使用...

    vw单位

    vw是css的一个属性,和px,rem等类似,属于长度单位。

    在浏览器中, 1 vw = viewport 的宽度 /100

    根据这个特性,vw 可以帮助我们实现移动端自适应布局,其优点在于所见即所得,甚至优于rem,因为完全不用使用额外的计算。

    推荐和sass、less这种css预处理语言一起使用,因为其可以定义变量及函数,会在使用vw上提供巨大帮助。

    @vv:7.5vw;

    .circle{

    width: 100/@vv;

    height: 100/@vv;

    border: 1px solid red;

    border-radius: 50%;

    font-size: 16/@vv;

    text-align: center;

    line-height: 100/@vv;

    }

    header.clear{

    width: 100%;

    height: 80/@vv;

    font-size: 42/@vv;

    background: #ededed;

    line-height: 80/@vv;

    text-align: center;

    }

    vw布局练习

    这是header

    circle

    下面三张图分别是在iphone 6|7|8 和ihone 6P|7P|8P 以及ipad Pro中的表现

    a3fe1e2612f4

    image

    a3fe1e2612f4

    image

    a3fe1e2612f4

    image

    原理

    以设计稿为750为例,假设viewport代表窗口宽度

    750 => viewport

    7.5 => viewport/100

    //得到

    1vw => 7.5

    // 元素list 宽为300px

    300 => 300/7.5 vw

    //得到

    @vv = 7.5vw

    300 => 300/@vv

    展开全文
  • vw和vw单位

    万次阅读 2020-02-29 22:15:35
    那么它们之间有什么关系,vw和vw单位究竟是什么呢? rem布局是移动端布局的非常常见的一种方案,很多大网站也都采用了这种方案,它的好处就是这种布局方式做出的页面可以很好的适配各种型号的手机设备,在不同的...
    这周在逆战班学习了弹性布局,网格布局,以及移动端布局和响应式布局等。其中在移动布局有两种方案,流式布局和rem布局,这里我讲的vw以及vw单位就是与rem布局息息相关的。
    那么它们之间有什么关系,vw和vw单位究竟是什么呢?
    rem布局是移动端布局的非常常见的一种方案,很多大网站也都采用了这种方案,它的好处就是这种布局方式做出的页面可以很好的适配各种型号的手机设备,在不同的分辨率下等比放大,始终给用户很协调的感觉。
    这里展示下效果图:
    


    这是在iphone6/7/8下面的效果。
    再看下图:
    在这里插入图片描述(图2)
    这是iPad下的效果。为了对比明显我并没有选择iPhone plus,我们可以在上方看到分辨率的对比,iPad的分辨率比iPhone6多出一倍多,但是界面依然很好的展示出来了,仔细观察四周的间隙并没有变,整体还是非常协调,与此同时我们也可以明显的看出此时屏幕所能显示内容变少了,这也就是他的缺点。那么rem布局究竟如何实现的呢?

    1.rem

    rem事实上就是一个相对单位,在之前我们学习过em这个单位,它就是相对于父元素或者当前元素的font-size值的,1em1个font-size的大小,而rem其实也是相对font-size的,不同的是它是相对根元素的font-size的,1rem1个根元素的font-size。利用rem的这个特性就可以实现rem布局了。
    先给html的font-size设置一个固定值,通常设置100px就可以了,因为好计算,在网页中我们一般不要让字体## 标题大小小于12px,然后1rem就等于100px,这样转换下来rem页面就可以实现了。
    这里展示下一个简单的案例:
    首先还是照常写下html结构:

    精品好菜

    金枪鱼的幻想曲
    早餐的诱惑
    进击的鸡小胸

    结构写完接着是css样式:
    /* css reset */

    *{margin: 0;padding: 0;}
    img{display: block;}
    a{text-decoration: none;}

    /* css common */
    html{font-size: 100px;}
    body{font-size: 0.16rem;}

    /* css header */
    #header{height: 0.44rem;background: #02D1C5;}
    #header span{font-size: 0.18rem;color: #FEFEFE;text-align: center;line-height: 0.44rem;display: block;}

    /* css search */

    #search{width: 2.5rem;height: 0.25rem;background: #F3F3F3;margin: 0.2rem 0.61rem 0.21rem 0.64rem;display: flex;}
    #search input{width: 2.19rem;height: 100%;border: none;background: none;}
    #search span{width: 0.17rem; margin-left: 0.1rem;margin-right: 0.04rem;display: block;margin-top: 0.02rem;}

    /* css banner */

    #banner{width: 100%;height: 1.5rem;}
    #banner img{width: 100%;height: 100%;}

    /* css nav */

    #nav{width: 100%;height: 0.88rem;display: flex;justify-content: space-evenly;align-items: center;}
    #nav a p{width: 1.65rem;height: 0.5rem; border-radius: 0.02rem;box-shadow: 0.02rem 0.02rem 0.1rem 0.02rem #cccccc;text-align: center;line-height: 0.5rem;color: #02D1C5;}
    #nav a p span{font-size: 0.25rem;margin-right: 0.17rem;}

    /* css main */

    #main{margin-bottom: 0.7rem;}
    #main h3{font-size: 0.16rem;color: #666666;margin-left: 0.49rem;margin-bottom: 0.1rem;}
    #main div{width: 3.45rem;margin: 0 auto;}
    #main div a{display: block;width: 3.45rem;height: 1.25rem;margin-bottom: 0.15rem;position: relative;}
    #main div a img{width: 100%;height: 100%;}
    #main div a div{width: 100%;height: 100%; position: absolute;left: 0;top: 0;background: rgba(83,83,83,.5);text-align: center;line-height: 1.25rem;font-size: 0.2rem;color: white;border-radius: 0.2rem;}

    /* css footer */
    #footer{width: 100%; height: 0.5rem;display: flex;justify-content: space-around;background: white;position: fixed;bottom: -0.01rem;}
    #footer a {display: block;height: 100%;color: #666666;text-align: center;font-size: 0.14rem;}
    #footer a span{font-size: 0.24rem;}
    #footer a.active{color: #02D1C5;}
    #footer a.footer-content{width: 0.5rem;height: 0.5rem;border-radius: 50%;background-color: #02D1C5;font-size: 0.22rem;color: white;line-height: 0.5rem;position: relative;bottom: 0.24rem;}

    这个结构所有数据都是写在iPhone 6的分辨率基础上的,它的效果也成功地实现了,具体效果可以参考图1,但是要注意,这个时候如果我们切换了设备,那html的font-size是不会智能的切换的,rem也就没做到适配了。仅仅是这样我们是实现不了图2的效果的,不妨看下此时它在iPad下的效果:
    在这里插入图片描述
    (图3)
    这个时候可以发现它和图2的效果差别是非常大的,那么rem怎么做到等比缩放呢,这里就要用到vw了。

    2.vw

    vw也是一个单位,并且也是一个相对单位:
    vw -> view width 
    vh -> view height
            相对单位:表示把屏幕自动分成了100vw宽和100vh高。
                vw / vh : 把屏幕分为100份,1vw等于屏幕宽的1%。
    这里的100份,它是适用于各种分辨率下的,不管是宽375px的设备,还是414px的都是一样的效果。
    假设屏幕是375px -> 100vw -> 1vw == 3.75px
    假设屏幕是414px -> 100vw -> 1vw == 4.14px
    	在实际操作中我们一般都会选择iphone6的设备,它的宽度就是375px的,于是我们可以进行一个简单的计算
    1vw == 3.75px ? -> 多少个vw == 100px -> 26.666667vw -> 100px
    

    所以fong-size:100px == font-size:26.666667vw
    了解了vw的原理我们只需要对上述案例的代码进行小小的带动就可以了,如下所示:
    html{font-size: 26.666667vw;}
    这样无论任何设备下,就都可以自动运算转换进行适配了。

    3.拓展

    	在实际操作中计算也是很容易的,如果设置的数值因为种种需要不好计算,比如font-size:75px,那我们也可以用vscode中的插件px to rem   
    

    在这里插入图片描述
    在这里插入图片描述
    (图4)
    然后按上图设置一下,无论需要跟元素的font-size是多少,只需要改动px-per-rem的数值就可以了,比如我这里设置的就是100,然后回到代码页面选中需要改动的代码,按下快捷键alt+z就可以全部改成rem了。

    展开全文
  • css中vw指的是什么单位发布时间:2020-12-16 10:46:00来源:亿速云阅读:66作者:小新这篇文章主要介绍了css中vw指的是什么单位,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面...

    css中vw指的是什么单位

    发布时间:2020-12-16 10:46:00

    来源:亿速云

    阅读:66

    作者:小新

    这篇文章主要介绍了css中vw指的是什么单位,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。在css中,vw是一个长度单位,一个视口单位,是指相对于视口的宽度;视口会被均分为100单位的vw,则1vw等于视口宽度的1%,比如浏览器的宽度为1920px,则“1vw=1920px/100=19.2px”。

    视口单位(Viewport units)

    什么是视口?

    在PC端,视口指的是在PC端,指的是浏览器的可视区域;

    而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Viewport(视觉视口),Ideal Viewport(理想视口)。

    视口单位中的“视口”,PC端指的是浏览器的可视区域;移动端指的就是Viewport中的Layout Viewport。

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

    1.vw:相对于视口的宽度, 视口被均分为 100 单位的vw,1vw等于视口宽度的1%。

    2.vh:相对于视口的宽度, 视口被均分为 100 单位的vh,1vh等于视口高度的1%。

    3.vmin:选取vw和vh中最小的那个。

    4.vmax:选取vw和vh中最大的那个。

    vw 和 vh

    全称是 Viewport Width 和 Viewport Height,视窗的宽度和高度,相当于屏幕宽度和高度的 1%。

    vh and vw:相对于视口的高度和宽度,而不是父元素的(CSS百分比是相对于包含它的最近的父元素的高度和宽度)。1vh 等于1/100的视口高度,1vw 等于1/100的视口宽度。

    比如:浏览器高度950px,宽度为1920px, 1 vh = 950px/100 = 9.5 px,1vw = 1920px/100 =19.2 px。

    vh/vw与%区别

    36c6c730d635f5fe64c306280291b2dc.png

    代码:

    body{background-color:orange;}

    .p{width:50vw;height:50vh;background-color:pink;fontsize:3em;}

    P 标签的宽度为 50vw

    效果:

    a56489269d677c912655e222e7793352.png

    说明:

    1 个 vw 相当于页面宽度的 1%,比如页面宽度是 1000px,那么 1vw

    就是 10px,vh 同理。

    P 标签的宽度是 50vw,所以就是页面宽度的 50%,高度是 50vh,所以就

    是页面高度的 50%。

    感谢你能够认真阅读完这篇文章,希望小编分享css中vw指的是什么单位内容对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,遇到问题就找亿速云,详细的解决方法等着你来学习!

    展开全文
  • 在css中,vw是一种视窗单位,也是相对单位。相对于视口的宽度,视口被均分为100单位vw。在css中,vw是一种视窗单位,也是相对单位。相对于视口的宽度,视口被均分为100单位vw。下面本篇文章就来给大家介绍一下,...
  • vw和vh单位

    2020-03-01 22:15:01
    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

    2020-02-19 15:36:59
    vw 和 vh 也是相对长度单位。 1 vw = 1/100 视口宽度; 1 vh = 1/100 视口高度; 模态框的半透明覆盖层的特征即大小覆盖整个视口,现在我们用vh和vw做上面“下载chrome浏览器”的模态框的半透明覆盖层: 1 设置...
  • px2vw 一个 px 单位转成 vw 单位的 VSCode 插件
  • 在css中,vw是一种视窗单位,也是相对单位。相对于视口的宽度,视口被均分为100单位vw。下面本篇文章就来给大家介绍一下,希望对大家有所帮助。CSS 单位是一种量度单位,包括尺寸单位和颜色单位。我们常使用向对...
  • 移动端vw单位

    2021-09-18 16:34:14
    由于不同设备的完美视口是不一样的,由于不同设备视口和像素比不同,所以咋移动端开发时,不使用px进行布局,而是使用vw(viewport width) 100vw = 100%的视口宽度 1vw = 1%的视口宽度 vw永远相当于视口宽度进行...
  • vw单位相关

    2019-10-07 04:49:27
    视口被均分为100单位vw h1 { font-size: 8vw; } 如果视口的宽度是200mm,那么上述代码中h1元素的字号将为16mm,即(8x200)/100 2.相对于视口的高度。视口被均分为100单位的vh h1 { font-size: 8vh; } 如果视口...
  • vw单位 vw是相对于视窗宽度的单位, 1vw=1/100浏览器宽度。 vh单位 vh是相对于视窗高度的单位, 1vh=1/100浏览器高度。 vw vh的用途 vw vh相对于浏览器的窗口的大小,代码如下: .div1{ width:...
  • vh, vw 单位

    2020-02-15 15:02:34
    css 中的 vh vw 单位解释
  • CSS3新vw, vh单位

    万次阅读 2016-12-17 22:00:50
    From: ...CSS3新vw, vh单位与纯CSS定位的弹框屏幕居中效果实例页面 CSS3新vw, vh单位与纯CSS定位的弹框屏幕居中效果实例页面 /* 既然vw, vh是视区相
  • em做前端的应该对em不陌生,不是什么罕见的单位,是相对单位,参考物是父元素的font-size,具有继承的特点。如果字体大小是16px(浏览器的默认值),那么 1em = 16px。不过,这样使用很复杂,很难很好的与px进行对应,...
  • 微信小程序中的vw和vh单位 100vw代表手机宽度, 100vh代表手机高度。 实现代码: button{ width: 50vw; }
  • css vw单位As page layouts become more complex, developers require access to a greater range of measurements to bring their designs to life. Beyond the standard percentage widths, r/ems and pixels we’...
  • vw和vh是视口(viewport units)单位,何谓视口,就是根据你浏览器窗口的大小的单位,不受显示器分辨率的影响,是不是很神奇,这就代表了,我们不需要顾虑到现在那么多不同电脑有关分辨率的自适应问题。vw是可视窗口的...
  • vh或vw单位

    2018-01-28 01:21:38
    响应式布局的单位我们第一时间会想到通过rem单位来实现适配,但是它还需要内嵌一段脚本去动态计算跟元素大小
  • 1 什么是vw? vw是一种视窗单位,也是相对单位。相对于视口的宽度,视口被均分为100单位vw。能够实现页面内的字体大小跟随视口的大小而改变。 1vw 视口宽度的1% 100vw 视口宽度的100% 1vh 视口高度的1% 100vh...
  • 视口单位(Viewport units)什么是视口?在桌面端,视口指的是在桌面端,指的是浏览器的可视区域;而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Viewport(视觉视口),Ideal Viewport(理想视口)。...
  • vh,vw单位

    2019-08-18 11:22:33
    vh,vw单位你知道多少? 阅读 13581 收藏 106 2017-09-07 原文链接:hopkinson.github.io 在实时音视频中,基于 TensorFlow 实现图像识别(内附 demo)juejin.im 两个月都没有更新自己的博客了,可能自己一直在...
  • scss之px单位转成vw单位

    千次阅读 2019-09-27 00:39:58
    @charset "UTF-8";...// px单位转成vw单位 @function px2vw($size: 14px, $width: 375px) { @if (type-of($size) == "number" and unit($size) == "px") { @return $size * 100vw / $width; } @else {...
  • vh和vw自适应布局单位

    2019-02-09 13:05:15
    先要弄懂它是什么就先看看什么是视口 在桌面端,视口指的是在桌面端,指的是浏览器的可视区域;而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Viewport(视觉视口),Ideal Viewport(理想...
  • 文章目录视口vw单位设计图举例rem单位重现改变根标签字体大小 视口 不同的设备完美视口的大小是不一样的,比如: iphone6 – 375 iphone6plus – 414 由于不同设备视口和像素比不同,所以同样的375个像素在不同的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,261
精华内容 3,704
关键字:

vw是什么单位