zoukankan      html  css  js  c++  java
  • 理解并使用CSS3中的单位rem vh vw vmin vmax

    rem vh vw vmin vmax做为CSS3中的新单位,其实都出来挺久的了,这篇文章将总结并理解下它们。

    rem

    如果你给body设置了font-size字体大小,那么body的任何子元素的1em就是等于body设置的font-size  

    body {  font-size: 14px; }  
    div {  font-size: 1.2rem; // calculated at 14px * 1.2, or 16.8px}

    em

    从它上一级父元素继承了字体大小,并且逐渐得增加。

    <body>
           <div class=”div1”>
                  <div class=”div2”>
                         <div class=”div3”>
                   </div>
            </div>
    </div>
    </body>
    <style>
    body{ font-size:14px; }
    div1{font-size:1.2em};//1.2*14PX
    div2{font-size:1.2em}//1.2*1.2*14px
    div3{font-size:1.2em}//1.2*1.2*1.2*14px
    </style>

    vh 和 vw

     vw:视窗宽度的百分比 
     vh:视窗高度的百分比 

    视窗,指的是浏览器可视区域的宽高,也就是window.innerWidth/window.innerHeight。1vw就是1%的浏览器的宽度。100vw就是整个视窗的宽度。

    .demo{//一行css实现同屏幕等高,等宽
      height: 100vh;
      100wh;
    }

    办公资源网址导航 https://www.wode007.com

    vmin 和 vmax

    vmin:当前较小的vw和vh 
     vmax:当前较大的vw和vh

    vmin 和 vmax则关于视口高度和宽度两者的最小或者最大值 浏览器的宽度设置为1100px,高度设置为700px, 1vmin = 7px, 1vmax = 11px。 如果宽度设置为800px,高度设置为1080px, 1vmin就等于8px, 1vmax则未10.8px

    总结:

    对CSS的单位的使用了解是非常重要的,也许你会遇到一个问题可以通过css的这些单位得到解决,同时对于rem,vh和vw,百分比等都是我们做自适应网站常用的方法。

  • 相关阅读:
    cmd的有趣的操作
    Hbuilder 【App开发准备】
    Hbuilder 【app设置,云打包】
    U盘测试和查明真伪
    luogu P2962 [USACO09NOV]灯Lights 高斯消元
    Nowcoder牛客网NOIP赛前集训营-提高组(第六场)
    Codeforces Round #517 (Div. 2)
    code——tmp
    bzoj3329: Xorequ 数位DP
    bzoj3033: 太鼓达人 欧拉路径
  • 原文地址:https://www.cnblogs.com/ypppt/p/12942831.html
Copyright © 2011-2022 走看看