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

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

  (1)vwvhvminvmax 是一种视窗单位,也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗(Viewport)大小来决定的,单位 1,代表类似于 1%

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

  (2)具体描述如下:

  vw:视窗宽度的百分比(1vw 代表视窗的宽度为 1%

  vh:视窗高度的百分比

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

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

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

  (1)% 是相对于父元素的大小设定的比率,vwvh 是视窗大小决定的。

  (2)vwvh 优势在于能够直接获取高度,而用 在没有设置 body 高度的情况下,是无法正确获得可视区域的高度的,所以这是挺不错的优势。

3、vmin、vmax 用处

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

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

4、一个简单的样例

  视窗(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>

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

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

<!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>

   

原文地址:https://www.cnblogs.com/goloving/p/9119622.html

时间: 2024-10-12 19:19:36

css3新单位vw、vh、vmin、vmax的使用介绍的相关文章

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

一.N多的唠哩唠叨 CSS3中一些新的单位早在去年春暖花开的时候就介绍了,参见:CSS长度值及时间.频率.角度单位.显然,其中就提到了本文要感叹的单位vw, vh,见下图: 不过“我看见你”和“我触碰你”是不一样的.正好,机缘巧合,最近又与这两个单位想见.大致琢磨了下,貌似vh这个单位可以实现我以前曾希望实现的的整体高度自适应布局.想到这里,自己不由得小兴奋了下,于是决定抽时间研究研究(虽然最近整iPad忙得屁股尿流~~). 然而…… //zxx: 先卖个关子,一点一点唠叨来~~ vw, vh这

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

一.N多的唠哩唠叨 CSS3中一些新的单位早在去年春暖花开的时候就介绍了,参见:CSS长度值及时间.频率.角度单位.显然,其中就提到了本文要感叹的单位vw, vh,见下图: 不过“我看见你”和“我触碰你”是不一样的.正好,机缘巧合,最近又与这两个单位想见.大致琢磨了下,貌似vh这个单位可以实现我以前曾希望实现的的整体高度自适应布局.想到这里,自己不由得小兴奋了下,于是决定抽时间研究研究(虽然最近整iPad忙得屁股尿流~~). 然而…… //zxx: 先卖个关子,一点一点唠叨来~~ vw, vh这

CSS3自适应布局单位 —— vw,vh

1. 什么是视口? 在桌面端,视口指的是在桌面端,指的是浏览器的可视区域:而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Viewport(视觉视口),Ideal Viewport(理想视口). 2. 视口单位vw,vh 视口单位中的"视口",桌面端指的是浏览器的可视区域(不包括工具栏和按钮的网页浏览器):移动端指的就是Viewport中的Layout Viewport. 根据CSS3规范,视口单位主要包括以下4个: 1. vw:1vw等于视口宽度

视区相关单位vw, vh ,vm,CSS/CSS3长度、时间、频率、角度单位大全

一.CSS长度值 em 相对于父元素的字体大小 ex 相对于小写字母"x"的高度 gd 一般用在东亚字体排版上,这个与英文并无关系 rem 相对于根元素字体大小 vw 相对于视窗的宽度:视窗宽度是100vw vh 相对于视窗的高度:视窗高度是100vh vm 相对于视窗的宽度或高度,取决于哪个更小 ch 相对于0尺寸 px 相对于屏幕分辨率而不是视窗大小:通常为1个点或1/72英寸 in inch, 表英寸 cm centimeter, 表厘米 mm millimeter, 表毫米 p

CSS3视口单位vw,wh

vw和vh是视口(viewport units)单位,何谓视口,就是根据你浏览器窗口的大小的单位,不受显示器分辨率的影响,是不是很神奇,这就代表了,我们不需要顾虑到现在那么多不同电脑有关分辨率的自适应问题. vw是可视窗口的宽度单位,和百分比有点一样,1vw = 可视窗口的宽度的百分之一.比如窗口宽度大小是1800px,那么1vw = 18px.和百分比不一样的是,vw始终相对于可视窗口的宽度,而百分比和其父元素的宽度有关. vh就是可视窗口的高度了. 他们能够根据窗口大小来自动调节字体大小,这

css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况

px:绝对单位,页面按精确像素展示 em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值. rem:相对单位,可理解为"root em", 相对根节点html的字体大小来计算,CSS3新加属性,chrome/firefox/IE9+支持. (另外需注意chrome强制最小字体为12号,即使设置成 10px 最终都会显示成 12px,当把html的font-size设置成10px,子节点rem

css中px em rem vw vh vmax vmin等单位的区别--转载

px:绝对单位,页面按精确像素展示 em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值. rem:相对单位,可理解为"root em", 相对根节点html的字体大小来计算,CSS3新加属性,chrome/firefox/IE9+支持. (另外需注意chrome强制最小字体为12号,即使设置成 10px 最终都会显示成 12px,当把html的font-size设置成10px,子节点rem

px,em,rem,vh,vw,vmin,vmax的区别

css手册中关于font-size是这么介绍的: font-size 值可以是绝对或相对值. 绝对值: 将文本设置为指定的大小 不允许用户在所有浏览器中改变文本大小(不利于可用性) 绝对大小在确定了输出的物理尺寸时很有用 相对大小: 相对于周围的元素来设置大小 允许用户在浏览器改变文本大小 注意:如果您没有规定字体大小,普通文本(比如段落)的默认大小是 16 像素 (16px=1em). 1.px:为像素单位.它是显示屏上显示的每一个小点,为显示的最小单位.它是一个绝对尺寸单位: 2.em:相对

CSS3自适应字体大小(vw vh)

viewpoint css3提供了一些与当前viewpoint相关的元素,vw,vh,vmin, vmax等. “viewpoint” = window size vw = 1% of viewport width 1vh = 1% of viewport height 1vmin = 1vw or 1vh, 最小 1vmax = 1vw or 1vh, 最大 兼容性:chrome 20+/ safari 6+/ IE 10+ / FF 19+ / IOS 6+ DEMO地址:http://qi