zoukankan      html  css  js  c++  java
  • css3 vw、vh属性详解,以及与%、rem的区别介绍

    最近的项目需求,内嵌电视端显示页面,所以使用到了css3的属性:vw vh,遇到一些问题,记录下来

    vw、vh是什么?

    字面上可以简单理解为,vw (view width),vh(view height),相当于一种长度单位,类似百分比,1vw = 屏幕宽度的百分之一,1vh等于屏幕高度的百分之一,也是属于一种自适应的长度单位。

    那为什么不直接用%、rem,而要用vw、vh?有什么区别?

    显示器都存在逻辑分辨率和物理分辨率,手机、pad、电脑、电视,都存在这两种分辨率,一个是理论值,一个是显示器的实际值,可能电脑设置的分辨率是1366*800,但电脑的实际分辨率是1280*720,所以在我们设置的长度单位上可能就会存在偏差,vm、vh就是以物理分辨率为基础,在物理分辨率上的百分比,而我们平时用的%是以父元素长度为参照,rem则是以html、body设置的font-size为参照。

    所以在混合使用这两种长度单位的时候千万要小心,因为如果父元素存在padding、margin的话,父元素的满屏长度就不是100%,在子元素中使用vw、vh则是以满屏长度为基准,就会存在偏差,如下图:

    中间元素的长度、高度、定位,使用的都是vw、vh,都是基于物理分辨率,而父元素使用的是百分比,而且存在padding,所以出现位置偏差

    解决方案,两种:1 将父元素宽高改为以vw、vh为单位,2 将子元素改为以%为单位,视实际情况更改,我这里因为是在原有项目上的修改,所有子集单位都是vw、vh,所以我更改父元素的单位

     注意:vw、vh为css3新增的单位,所以在不支持css3的浏览器中是无法实现的,IE8及IE8以下的浏览器不支持,选择性使用,希望本篇博文能够帮助到你!

  • 相关阅读:
    51nod_1445 变色DNA 最短路模板 奇妙思维
    51nod_1459 最短路 dijkstra 特调参数
    UVA_10653 公主与王子 #刘汝佳DP题刷完计划
    HOJ 13819 Height map
    51nod_1255字典序最小的子序列
    电梯设计需求调研报告
    梦断代码读后感
    求一循环数组的最大子数组的和
    求二维数组中最大子数组的和
    四则运算
  • 原文地址:https://www.cnblogs.com/wangqiao170/p/9018763.html
Copyright © 2011-2022 走看看