CSS3新vw, vh单位

From: http://www.zhangxinxu.com/wordpress/2012/09/new-viewport-relative-units-vw-vh-vm-vmin/

视区相关单位vw, vh..简介以及可实际应用场景

“视区”所指为浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。

移动端vh vw真正的基准度量是layout viewport，也就是meta标签中viewport属性定义的值，默认980px。可以用document.document Element.clientWidth来获取

注：一般情况下，Chrome浏览器浏览器内外宽度是一样的（因为浏览器左右无边框）；加上浏览器大小变小时图片尺寸不渲染的bug，因此，上demo最佳测试浏览器是IE9. 

vm相比%并没有什么优势，vw单位用做宽度自适应的布局，完全是吃力不讨好

vw, vh这两个视区相关动态单位似乎应用前景一下子黯淡了很多，潜力似乎也就那样——想来想去，得出一个结论：vw, vh视区大小相关单位只适用于非定位元素的高度相关属性上！//zxx: 高度相关属性如 – height/min-height/max-height/line-height/padding-top/padding-bottom等

Android4.4之前的版本，目前怕是还是要兼顾的，怎么办？我觉得没有必要为了一个老妪而放弃整个后宫，对于绝大部分设备，我们还是vm + calc哗啦啦地走起，老的设备，我们可以使用以前JS的策略，打个脚本补丁，估计十来行代码，效果都是一样的，CSS代码也完全复用，一点都没必要特异处理，因为老机子不认识vw，所以完全没必要担心新老冲突这样的问题。

一些只能vw, vh才能完成的应用场景：

1. 场景之：元素的尺寸限制

vw vh 主要是实现了动态高度百分比布局，比如宽高比不固定的图片，vw很轻易的实现正方形图片缩略图

原始大图的尺寸限制问题——因为很有可能图片过大，尼玛一屏显示器区域不够放，我们需要对其进行缩放处理。

这类限制的实现，在当下，需要获得图片的原始大小，以及浏览器内部尺寸，算大小，算比例等，算是比较折腾的。

但是，vw, vh等单位本身就是浏览器视区大小相关单位，直接使用其做限制，岂不省了N多JS代码？

CSS代码：

.vw_vh_img {
    max-width: 90vw;
    max-height: 90%;
    max-height: 90vh;
}

HTML代码：

<img src="http://ww3.sinaimg.cn/large/61ecbb3djw1dx4hai2ggnj.jpg" class="vw_vh_img" />

2. CSS3新vw, vh单位与纯CSS定位的弹框屏幕居中效果实例页面

  
  
  
  


  

    图片宽度（目前512像素）：
 128  1024
  

  点击我出现图片弹框
  

  

    

        
尺寸动态可变图片(PIC: 512px*381px)

        [关闭]
        

        	
        

    

3. 视区覆盖以及边界定位

拿视区覆盖举例，如果我定义一个元素的高宽如下：

.element {
    width: 100vw;
    height: 100vh;
}

然后，再将其定位到视区左上角，岂不是可以实现视区的完整覆盖；我立马想到了弹出框的半透明覆盖层.建议在Chrome20+浏览器

下查看效果（因为有range控件），点击demo页面按钮，则半透明覆盖层显现了——完整覆盖：




    
    
    
    


  
以下字体变化需要 变换浏览器窗口有字号的变化
  
VW size 
  

    
ABCDEFGHIJKLMN
    
一二三四五六七八九十零
  

  
normal size 
  

    
ABCDEFGHIJKLMN
    
一二三四五六七八九十零
  

  


















  
各个浏览器测试效果是一模一样的，固定在视区底部，不随滚动条滚动的空白工具栏

3. 场景之：Office Word效果

我们可以把web页面做得像Office文档那样，一屏正好一页；拖动滚动条，我们可以一直往下看到最后一页。 如果只借助CSS，这种效果绝对定位是实现不了的。因为其top值是动态的(100%, 200%, 300% …)，必须借助JavaScript才能实现。而使用vh单位，既能捕获浏览器可视区域高度，又不脱离文档流，真是实现Office Word效果最佳利器！

  
  
  
  


  
    

    
本demo应用诸多CSS3属性，部分HTML特性，以及高级点的JavaScript API.
    
demo页面的宽高按照标准纸张的21:29.7的比例制定，因此，所有单位值都是使用的vh单位。
    
本demo 元素还可以设置float:left或inline-block两端/居中对齐等，让一屏的水平方向显示多个page页面，
      就如实际的office word一样。
    
  
  
  

  

1. 本demo应用诸多CSS3属性，部分HTML特性，以及高级点的JavaScript API.
2. demo页面的宽高按照标准纸张的21:29.7的比例制定，因此，所有单位值都是使用的vh单位。
3. 本demo 元素还可以设置float:left或inline-block两端/居中对齐等，让一屏的水平方向显示多个page页面，就如实际的office word一样。

4. 水平居中布局与滚动条跳动

绝大多数的页面间布局都是水平居中布局，主体定个宽度，然后margin: 0 auto;

例如，妇女之友大淘宝的首页：
淘宝首页的居中布局


然而，这种布局有一个存在一个影响用户体验的隐患。应该都知道，现代浏览器滚动条默认是overflow:auto类型的，也就是如果尺寸不足一屏，没有滚动条；超出，出现滚动条。于是，问题来了：


信息流页面，如新浪微博，是从上往下push渲染的。开始只有头部一些信息加载，此时页面高度有限，没有滚动条；然后，更多内容显示，滚动条出现，占据可用宽度，margin: 0 auto主体元素自然会做偏移——跳动产生。
JS交互，本来默认页面高度不足一屏，结果点击了个“加载更多”，内容超过一屏，滚动条出现，页面主体就会左侧跳动。
结构类似几个页面通过头部的水平导航刷新切换，结果有的页面有滚动条，有的没有。造成的结果就是，导航尼玛怎么跳来跳去！
当前优化这种体验问题，一般有两种解决方法：


高度尺寸不确定的，例如，新浪微博，使用：
body { overflow-y: scroll; }
新浪微博处理滚动跳动问题方法


高度确定的，例如淘宝网首页。使用CSS把页面尺寸布局骨架搭好，再在里面吐数据。于是，要么没有滚动条，要么滚动条直接出现。不会出现跳动。

CSS3计算calc和vw单位巧妙实现滚动条出现页面不跳动。

    
页面出现滚动条的时候没有跳动晃动实例页面

        
展示
 

          
我不像标题，我是一个不会晃动的安静的小天使！
 

        
代码
 
CSS代码：
 

        
 
          .demo { 
            margin-left: -webkit-calc(100vw - 100%); 
            margin-left: calc(100vw - 100%); 
            text-align: center; 
            overflow: hidden; 
            -webkit-animation: scrollbar-toggle 20s infinite alternate; 
            animation: scrollbar-toggle 20s infinite alternate; 
          } 
          @-webkit-keyframes scrollbar-toggle {from{height: 0vh;}to{height: 80vh;}} 
          @keyframes scrollbar-toggle {from{height: 0vh;}to{height: 80vh;}}