zoukankan      html  css  js  c++  java
  • CSS3中的vh、vw及其应用场景

    一、vh   vw

      vw和vh是相对于视口(viewport)的宽度和高度。由于现在移动设备的屏幕尺寸之差别,如果仍然根据屏幕的物理分辨率来设计网页,效果很难统一,因此html5和css3引入视口的概念来代替显示器的物理尺寸。通过在meta标签上的设置,视口的长宽可以跟设备的物理分辨率相等,也可以不相等(以便手机上可以实现用两个手指来放大会缩小页面),可根据需要灵活掌握。在PC端中,视口的长宽则是跟浏览器窗口的物理分辨率相等的。

       1vw等于视口宽度(viewport width)的百分之一,也就是说100vw就是视口的宽度;

      1vh等于视口高度(viewport height)的百分之一。

      (字体也可以设置)

    二、应用

      解决父级无高  ,设置自身固定高值又不能兼容所有设备,设置百分比无效,此时用vw设置可完美解决,兼容各种设备。

        

     

    不完全解析,深入探索推荐:http://www.zhangxinxu.com/wordpress/2012/09/new-viewport-relative-units-vw-vh-vm-vmin/)

  • 相关阅读:
    点双连通分量
    CF 839 E-最大团
    线性基
    CF 859 E
    【bzoj1303】[CQOI2009]中位数图
    【bzoj2282】[Sdoi2011]消防
    【bzoj2654]】tree
    【bzoj2600】 [Ioi2011]ricehub
    【bzoj4027】 [HEOI2015]兔子与樱花
    【bzoj3670】 [Noi2014]动物园
  • 原文地址:https://www.cnblogs.com/z-Feng/p/7507313.html
Copyright © 2011-2022 走看看