css3中新单位vw、vh、vmin、vmax的作用是什么

  
    
    
    
  
  
      
          
宽度100％, 字体5％
      

2，效果图

三、实现完整覆盖的遮罩层

有时为了突出弹出框，或者避免页面元素被点击。我们需要一个覆盖整个可视区域的半透明遮罩，这个使用 vw、vh 就可以很轻易地实现。

1，样例代码

  
    
    
    
  
  
      点击显示遮罩
      
  

2，效果图

四、实现居中显示的弹出框

1，弹出框大小随内容自适应

（1）样例效果图

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

弹出框的大小根据内容的大小自适应（logo 图片），同时弹出框后面还有个覆盖整个屏幕的半透明遮罩层。

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

（2）样例代码

遮罩层使用 vw、vh 实现全屏覆盖。弹出框添加到遮罩层中并居中。

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

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的作用是什么”的内容了，经过本文的学习后，相信大家对css3中新单位vw、vh、vmin、vmax的作用是什么这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！