zoukankan      html  css  js  c++  java
  • v系列尺寸知多少

    今天来说说vh,vw,vmin,vmax,这些css3中定义的尺寸单位,能在css中解析原始包含块的宽高信息,用途还是有些的.
    根据css3标准的定义,这些v系列的尺寸全称为viewport-percentage length, 顾名思义,它们定义了相对于原始包含块的百分比尺寸。当原始包含块的尺寸改变时,你用这些单位定义的尺寸也会相应地改变。当根元素的overflow为auto时,则看作原始包含块没有滚动条。
    注:原始包含块的尺寸会受到视口滚动条的影响。(我真心不知道这个影响是什么,如果你正好知道,还望批注给我,非常感谢)

    vw

    相当于原始包含块的长度的1%,如果我们设置一个元素的font-size:8vw,如果此时该元素包含块的长度为200px,那么该值为8*200/100=16px

    vh

    相当于原始包含块高度的1%

    vmin

    等于vw和vh的最小值

    vmax

    等于vw和wh的最大值

    就我而言,目前我会将这个单位用在两个方面:
    1、可以用来做移动设备中字体的单位。
    比如这样:

    1. body{
    2. font-size:5vh;
    3. }
    4. #header{
    5. font-size:1rem;
    6. }
    7. #content{
    8. font-size:0.8rem;
    9. }

    这样做的好处就是可以根据设置的大小来决定字体的大小,设置在body上的原因就是要做相对固定的字体大小设置,后续不论哪个元素的字体大小都根据根元素来使用rem设置。
    2、用于做高度100%的实现,这个不用多讲了。

    浏览器兼容性

    你可以直接查看http://caniuse.com/#search=vh





  • 相关阅读:
    第九篇 python基础之函数,递归,内置函数
    第六篇:python基础之文件处理
    第五篇:python基础之字符编码
    第四篇:python基础之条件和循环
    第三篇:python基础之数据类型与变量
    第二篇:python基础之核心风格
    第一篇:初识Python
    作业
    作业3
    作业2
  • 原文地址:https://www.cnblogs.com/rubyisaPM/p/4592514.html
Copyright © 2011-2022 走看看