2，弹出框大小随视窗大小改变

（1）样例效果图

点击弹出按钮后，会显示一个在整个屏幕上居中显示的弹出框。

弹出框的大小不再由内容的大小决定，而是随视窗大小改变（宽高均为屏幕可视区域的 80%）。

点击关闭按钮后，则隐藏弹出框。

（2）样例代码

遮罩层使用 vw、vh 实现全屏覆盖。而弹出框的尺寸位置同样使用 vw、vh 设置。

  
    
    
    
    
  
  
      点击显示弹出框
      
          
              居中弹出框
              关闭
              
                
              
          
      
  

五、显示大图时限制其较大尺寸

我们还可以通过视图单位来限制一些元素的较大宽度或高度，避尺寸过大而超出屏幕。

1，效果图

（1）点击按钮，在屏幕中央显示原始图片的大图。
（2）如果图片原始宽高均不超过屏幕宽高的 90%，则显示图片的默认大小。
（3）如果图片原始宽高均超过屏幕宽高的 90%，则限制为屏幕的 90%，使其能够完全显示。

2，样例代码

 

  
    
    
    
    
  
  
      点击显示大图
      
          
              
          
      
  

六、实现 Word 文档页面效果

1，效果图
（1）使用 vh 单位，我们可把 web 页面做得像 Office 文档那样，一屏正好一页。改变浏览器窗口尺寸，每页的大小也会随之变化。
（2）拖动滚动条，我们可以一直往下看到最后一页。

2，样例代码

  
    
    
    
    
    
      $(document).ready(function(){
        var lenPage = $("page").length;
        //自动添加每页底部的页码
        $("page").each(function(i){
          $(this).attr("data-page", "第 "+ (i+1) +" 页，共 "+ lenPage +" 页");
        });
      });
    
  
  
    欢迎访问 hangge.com
    
    
  

以上是“css3中新单位vw、vh、vmin、vmax有什么用”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！

扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流