• 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公里,小米手环/手机打卡。

  • 相关阅读:
    java 图片识别文字(中英文混合)
    KeePassXC v2.7.0beta1 翻译文件
    《道经》摘要
    两次取反(!!)的作用
    CBR || VBR || ABR || CVBR
    AVInputFormat AVOutputFormat
    map/set iterators incompatible
    Mysql快速插入千万条数据的实战教程转
    GD32F107RC调试,CAN2不能进入接收中断的原因
    BGFX多线程渲染
  • 原文地址:https://www.cnblogs.com/tangjiao/p/10362711.html
Copyright © 2020-2023  润新知