• 了解px、rpx、em、rem、%、vw、vh、vm的区别


    1、px
    1)px就是pixel的缩写,意为像素。
    2)px就是设备或者图片最小的一个点,比如常常听到的电脑像素是1024x768的,表示的是水平方向是1024个像素点,垂直方向是768个像素点。
    3)px是我们网页设计常用的单位,也是基本单位。
    4)通过px可以设置固定的布局或者元素大小。
    5)缺点:没有弹性。

    2、rpx
    1)rpx 是微信小程序解决自适应屏幕尺寸的尺寸单位。
    2)rpx(responsive pixel): 可以根据屏幕宽度进行自适应。
    3)微信小程序规定屏幕的宽度为750rpx。
    4)解释:例如宽度,相当于把屏幕宽度分为750份,1份就是1rpx。高度类似~

    3、em
    1)参考物是父元素的font-size,具有继承的特点。
    2)如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值。
    3)特点是1. em的值并不是固定的; 2. em会继承父级元素的字体大小。
    4)1em=1倍父元素font-size的值,2em=2倍父元素font-size的值,以此类推……

    4、rem
    1)rem是相对于根元素html,这样就意味着,我们只需要在根元素确定一个参考值,可以设计HTML为大小为10px,到时设置1.2rem就是12px.以此类推。
    2)优点是,只需要设置根目录的大小就可以把整个页面的成比例的调好。

    5、%
    一般来说就是相对于父元素的:
    1)对于普通定位元素就是我们理解的父元素
    2)对于position: absolute;的元素是相对于已定位的父元素
    3)对于position: fixed;的元素是相对于ViewPort(可视窗口),

    6、vw
    1)css3新单位,view width的简写,是指可视窗口的宽度。假如宽度是1200px的话。那100vw就是1200px,10vm就是120px,以此类推……
    2)举个例子:浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。

    7、vh
    和vw相似
    1)css3新单位,view height的简写,是指可视窗口的高度。假如高度是1200px的话。那100vh就是1200px,10vh就是120px,以此类推……
    2)举个例子:浏览器高度900px, 1 vh = 900px/100 = 9 px。

    8、vm
    1)css3新单位,相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vm 举个例子:浏览器高度2)2)900px,宽度1200px,取最小的浏览器高度,1 vm = 900px/100 = 9 px。
    2)兼容性太差 ,不建议使用

     
  • 相关阅读:
    死信队列消息原因排查
    MQ中间件死信队列深度不断增加问题解决案例
    DB2 57016报错的解决办法(表状态不正常,导致表无法操作)
    万门大学--童哲
    eclipse jvm配置
    weblogic threadpool has stuck threads
    8-10 ObserveableCommand演示
    8-9 四种执行方式区别讲解
    8-8 toObserve两种形态演示
    8-7 Observe两种形态演示
  • 原文地址:https://www.cnblogs.com/sumlen/p/12091119.html
Copyright © 2020-2023  润新知