zoukankan      html  css  js  c++  java
  • CSS3新单位vw,vh,vmin,vmax详解

    1,vw,vh,vmin,vmax是由视窗Viewport大小来决定的,单位1,代表1%,是一种相对单位,只要是为响应式适配视窗的一种解决方案;

    vw:view width(视窗宽度)的百分比,1vw代表视窗宽度的1%;

    vh:view height(视窗高度)的百分比,1vh代表视窗高度的1%;

    vmin:当前视窗宽度vw和视窗高度vh中较小的一个值;

    vmax:当前视窗宽度vw和视窗高度vh中较大的一个值;

    2,与百分比的区别:

    (1)%是相对于父元素的大小设定的,而vw,vh是由视窗大小决定的。

    (2)vw,vh优势在于能够直接获取高度,而%则在没有设定body的高度情况下,是无法正确获取可视区域的高度的,所以css3加入新单位是方便开发者的选择。

    3,vmin,vmax的用处:

    做移动页面开发时,如果使用vw,vh设置字体大小(例如10vw),在竖屏和横屏状态下显示字体大小是不一致的,而vmin,vmax是当前vw和vh中,较小值和较大值,这里就可以使用vmin和vmax,使得文字在横竖屏下面显示一致。

    4,浏览器兼容性:

    5,应用:

    比如,弹出框大小随内容自适应;显示大图石限制其最大尺寸;实现Word文档页面效果(使用vh单位,一屏正好一页,改变浏览器窗口大小,页面大小随之变化)等。

    【完】

    新年flag2——每天走8000步,一个月走8000*30=24W步,一万步大约7KM,那么24*7=168公里,小米手环/手机打卡。

  • 相关阅读:
    6、Docker Image
    5、Docker架构和底层技术
    4、Docker的安装
    3、Docker能干什么?
    2、Docker和虚拟机的对比
    1、Docker介绍
    20、Semantic-UI之数据验证
    Error:java: Compilation failed: internal java compiler error
    Exception in thread "main" java.lang.NoClassDefFoundError: org/springframework/boot/context/embedded/ServletRegistrationBean
    spring boot自定义starter
  • 原文地址:https://www.cnblogs.com/tangjiao/p/10362711.html
Copyright © 2011-2022 走看看