css3 vh vw vmin vmax/ px rem,em的使用

最新推荐文章于 2024-09-12 17:30:02 发布

Princess.

最新推荐文章于 2024-09-12 17:30:02 发布

阅读量309

点赞数 1

分类专栏： css html css3 文章标签： css3

原文链接：https://mp.csdn.net/mdeditor/88715746#

版权

css html 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

css3

3 篇文章 0 订阅

订阅专栏

（1）vw、vh、vmin、vmax 是一种视窗单位，也是相对单位。而是由视（Viewport）大小来决定的，单位 1，代表类似于 1%。视窗(Viewport)是你的浏览器实际显示内容的区域—，换句话说是你的不包括工具栏和按钮的网页浏览器。
（2）具体描述如下：
vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%）
vh：视窗高度的百分比
vmin：当前 vw 和 vh 中较小的一个值
vmax：当前 vw 和 vh 中较大的一个值
3，vmin、vmax 用处
做移动页面开发时，如果使用 vw、wh 设置字体大小（比如 5vw），在竖屏和横屏状态下显示的字体大小是不一样的。
由于 vmin 和 vmax 是当前较小的 vw 和 vh 和当前较大的 vw 和 vh。这里就可以用到 vmin 和 vmax。使得文字大小在横竖屏下保持一致。
1，页面代码
视窗（Viewport）单位除了可以用来设置元素的宽高尺寸，也可以在文本中使用。下面使用 vw 设置字体大小来实现响应式文字。


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>hangge.com</title>
    <style>
      html, body, div, span, h1, h2, h3 {
        margin: 0;
        padding: 0;
        border: 0;
      }
 
      .demo {
       width: 100vw;
       font-size: 5vw;
       margin: 0 auto;
       background-color: #50688B;
       color: #FFF;
      }
 
      .demo2 {
       width: 80vw;
       font-size: 5vw;
       margin: 0 auto;
       background-color: #ff6a00;
      }
 
      .demo3 {
       width: 50vw;
       height: 50vh;
       font-size: 1vw;
       margin: 0 auto;
       background-color: #ff006e;
       color: #FFF;
      }
    </style>
  </head>
  <body>
      <div class="demo">
          <h1>宽度100％, 字体5％</h1>
      </div>
      <div class="demo2">
          <h2>宽度80％, 字体5％</h2>
      </div>
      <div class="demo3">
          <h3>宽度50％, 高度50％, 字体1％</h3>
      </div>
  </body>
</html>

效果图：
在这里插入图片描述三、实现完整覆盖的遮罩层
有时为了突出弹出框，或者避免页面元素被点击。我们需要一个覆盖整个可视区域的半透明遮罩，这个使用 vw、vh 就可以很轻易地实现。


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>hangge.com</title>
    <style>
      html, body, div, span, button {
        margin: 0;
        padding: 0;
        border: 0;
      }
 
      button {
        width: 120px;
        height: 30px;
        color: #FFFFFF;
        font-family: "微软雅黑";
        font-size: 14px;
        background: #28B995;
      }
 
      #mask {
        width: 100vw;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        background: #000000;
        opacity: 0.5;
        display: none;
      }
    </style>
  </head>
  <body>
      <button onclick="document.getElementById('mask').style.display='inline'">点击显示遮罩</button>
      <div id="mask" onclick="document.getElementById('mask').style.display='none'"/></div>
  </body>
</html>

在这里插入图片描述参考学习：http://www.jquerycn.cn/a_26509

占用整个页面宽高
子元素大小根据浏览器改变而不是父元素
响应字体大小
响应垂直居中
等宽列

px rem,em的使用

px：绝对单位，页面按精确像素展示
em 单位转为像素值，取决于他们使用的字体大小。此字体大小受从父元素继承过来的字体大小，除非显式重写与一个具体单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
em单位会被显式重写大小决定，父元素字体大小，浏览器的默认字体大小。

<div style="font-size:20px;">
    <p style="font-size:1em;">这里1em=20px</p>
    <p style="font-size:2em;">这里2em=40px</p>
</div>

rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。rem 单位翻译为像素值是由 html 元素的字体大小决定的。此字体大小会被浏览器中字体大小的设置影响，除非显式重写一个具体单位。

<html style="font-size:100px;">
<head>
    <title></title>
</head>
<body>
     <p style="font-size:1rem;">这里1rem=100px</p>
     <div style="font-size:50px;">
          <p style="font-size:2rem;">这里2rem=200px</p>
     </div>
</body>
</html>