宽度vw和高度vh是怎么计算的

来源:3-3 移动端项目开发----表示层

丫丫_0006

2016-02-15 14:57

这个单位是怎么计算的,跟设计图的尺寸有关系吗,有的设计图是640的,还有的是750/1080的,都是怎么计算的啊,跟em,rem,%都有什么区别

写回答 关注

5回答

  • 懵逼的我
    2016-12-22 20:02:23

    当前环境下元素尺寸(像素)/当前设备分辨率宽度(像素)*100得出vm;

    而vh就是相对于设备高度计算的啦


  • webtow
    2016-04-18 21:18:30
    音乐图片的大小是75X75 怎么算才等一 15vw和15vh


    懵逼的我

    当前环境下元素尺寸(像素)/当前设备分辨率宽度(像素)*100得出vm; 而vh就是相对于设备高度计算的啦

    2016-12-22 20:02:13

    共 1 条回复 >

  • 李晓健
    2016-02-16 14:27:06

    font-size: 1.5625vw;是怎么回事呢?这个1.5625 = (10/640)*100 ,这个10是怎么来的呢,为了开发方便大家都喜欢把根字体设为10px,因为这样的话1rem就等于10px,而我们在量设计图时得到的单位是px,所以我们在转成rem时直接除以10就可以,计算非常方便。这个640是一般的设计图都是640px宽的,这个值可以根据设计图的实际大小来调整。为什么要乘以100呢,因为要换算到vm的单位。

    http://www.imooc.com/article/4767 文章一直在核审中,不知道你们能不能看到

  • 丫丫_0006
    2016-02-15 16:57:21

    demo中,字号10像素,写的是15点多vw,如果用%的话是62.5%这是怎么回事啊

  • core0
    2016-02-15 16:50:15

    px:绝对单位,页面按精确像素展示

    em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值。

    rem:相对单位,可理解为”root em”, 相对根节点html的字体大小来计算,CSS3新加属性,chrome/firefox/IE9+支持。

    vw:viewpoint width,视窗宽度,1vw等于视窗宽度的1%。
    vh:viewpoint height,视窗高度,1vh等于视窗高度的1%。

    丫丫_000...

    demo中,字号10像素,写的是15点多vw,如果用%的话是62.5%这是怎么回事啊

    2016-02-15 16:57:45

    共 1 条回复 >

HTML5+CSS3实现春节贺卡

又逢新春佳节,春节贺卡搞起来,学会HTML5+CSS3实现春节贺卡

110057 学习 · 450 问题

查看课程

相似问题