• css3新单位vw、vh、vmin、vmax的使用介绍

    1，vw、vh、vmin、vmax 的含义

    　　（1）vw、vh、vmin、vmax 是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，单位 1，代表类似于 1%。

    　　视窗(Viewport)是你的浏览器实际显示内容的区域—，换句话说是你的不包括工具栏和按钮的网页浏览器。

    　　（2）具体描述如下：

    　　vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%

    　　vh：视窗高度的百分比

    　　vmin：当前 vw 和 vh 中较小的一个值

    　　vmax：当前 vw 和 vh 中较大的一个值

    2、vw、vh 与 % 百分比的区别

    　　（1）% 是相对于父元素的大小设定的比率，vw、vh 是视窗大小决定的。

    　　（2）vw、vh 优势在于能够直接获取高度，而用 % 在没有设置 body 高度的情况下，是无法正确获得可视区域的高度的，所以这是挺不错的优势。

    3、vmin、vmax 用处

    　　做移动页面开发时，如果使用 vw、wh 设置字体大小（比如 5vw），在竖屏和横屏状态下显示的字体大小是不一样的。

    　　由于 vmin 和 vmax 是当前较小的 vw 和 vh 和当前较大的 vw 和 vh。这里就可以用到 vmin 和 vmax。使得文字大小在横竖屏下保持一致。

    4、一个简单的样例

    　　视窗（Viewport）单位除了可以用来设置元素的宽高尺寸，也可以在文本中使用。下面使用 vw 设置字体大小来实现响应式文字。

    1. html>
    2. <html>
    3.   <head>
    4.     <meta charset="utf-8">
    5.     <title>hangge.comtitle>
    6.     <style>
    7.       html, body, div, span, h1, h2, h3 {
    8.         margin: 0;
    9.         padding: 0;
    10.         border: 0;
    11.       }
    12.  
    13.       .demo {
    14.        width: 100vw;
    15.        font-size: 5vw;
    16.        margin: 0 auto;
    17.        background-color: #50688B;
    18.        color: #FFF;
    19.       }
    20.  
    21.       .demo2 {
    22.        width: 80vw;
    23.        font-size: 5vw;
    24.        margin: 0 auto;
    25.        background-color: #ff6a00;
    26.       }
    27.  
    28.       .demo3 {
    29.        width: 50vw;
    30.        height: 50vh;
    31.        font-size: 1vw;
    32.        margin: 0 auto;
    33.        background-color: #ff006e;
    34.        color: #FFF;
    35.       }
    36.     style>
    37.   head>
    38.   <body>
    39.       <div class="demo">
    40.           <h1>宽度100％, 字体5％h1>
    41.       div>
    42.       <div class="demo2">
    43.           <h2>宽度80％, 字体5％h2>
    44.       div>
    45.       <div class="demo3">
    46.           <h3>宽度50％, 高度50％, 字体1％h3>
    47.       div>
    48.   body>
    49. html>

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

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

    1. html>
    2. <html>
    3.   <head>
    4.     <meta charset="utf-8">
    5.     <title>hangge.comtitle>
    6.     <style>
    7.       html, body, div, span, button {
    8.         margin: 0;
    9.         padding: 0;
    10.         border: 0;
    11.       }
    12.  
    13.       button {
    14.         width: 120px;
    15.         height: 30px;
    16.         color: #FFFFFF;
    17.         font-family: "微软雅黑";
    18.         font-size: 14px;
    19.         background: #28B995;
    20.       }
    21.  
    22.       #mask {
    23.         width: 100vw;
    24.         height: 100vh;
    25.         position: fixed;
    26.         top: 0;
    27.         left: 0;
    28.         background: #000000;
    29.         opacity: 0.5;
    30.         display: none;
    31.       }
    32.     style>
    33.   head>
    34.   <body>
    35.       <button onclick="document.getElementById('mask').style.display='inline'">点击显示遮罩button>
    36.       <div id="mask" onclick="document.getElementById('mask').style.display='none'"/>div>
    37.   body>
    38. html>

        

     

  • 相关阅读:
    一、数组经典题型
    PicoLog软件应用-电动车能耗记录
    CSS 伪类选择器＜a＞ 的四个伪类选择器
    c++23中的新功能之十四输入输出指针
    Spring更加简单地存储Bean
    Hive【Hive（三）查询语句】
    【BUG】记一次Maven install 报错 Could not find artifact ...:pom:0.0.1-SNAPSHOT
    Java安全之Velocity模版注入
    二分法-数据类型定义导致的内存超限
    机器学习笔记:adaBoost
  • 原文地址：https://blog.csdn.net/qq_47443027/article/details/126135612