• html----rem结合vw布局


    1.rem

    rem是相对于根元素的字体大小的单位

    rem能等比例适配所有的屏幕,根据html的字体的大小来控制rem的大小

    2.dpr设备像素比

    dpr = 物理像素 / 逻辑像素

    物理像素:设计图量出的px(设备显示的px)
    逻辑像素:css中设置的px

    如果设计图的宽度是640px 或者 750px dpr = 2
    如果设计图的宽度是1080px dpr = 3

    3.vw

    视窗宽度
    1vw 等于视窗宽度的1%
    100vw 等于视窗宽度的100%

    4.vw 与 px 之间的换算

    如果设计图的宽度是640px  则 dpr = 2

    所以:逻辑像素 = 640px /2 = 320px
    所以:320px = 100vw
    所以:1vw = 3.2px
    所以:31.25vw = 100px = 1rem
    如果设计图的宽度是750px  则 dpr = 2
    
    所以:逻辑像素 = 750px /2 = 375px
    所以:375px = 100vw
    所以:1vw = 3.75px
    所以:26.67vw = 100px = 1rem
    如果设计图的宽度是1080px  则 dpr = 3
    
    所以:逻辑像素 = 1080px / 3 = 360px
    所以:360px = 100vw
    所以:1vw = 3.6px
    所以:27.78vw = 100px

    5.根元素字体大小的限制

    如果设计图宽度为640px
    则:根元素设置为
    html{font-size:31.25vw}

    如果设计图宽度为750px
    则:根元素字体大小设置为
    htmt:{font-size:26.67vw}

    如果设计图宽度为1080px
    则根元素字体大小设置为
    html:{font-size:27.78vw}

    6.计算方法:

    为了方便计算:1rem = 100px,,所以,要除以100

    已知 dpr = 2
    如果量取设计图的某部分 宽度 300px
    物理像素-------逻辑像素-------rem
    则:300/2/100 = 1.5rem
    7.rem是相对于根元素的字体大小的单位,能等比例适配所有的屏幕,根据html的字体的大小来控制rem的大小
    如果设计图为 640px
    根元素font-size=31.25vw 相当于100px,相当于 1rem
     
    如果设计图为750px
    根元素font-size=26.67vw 相当于100px,相当于 1rem
     
    一般,我们要在公共样式中根据设计图的大小,设置根元素字体的大小,单位为vm,
    如果设计图为640px,html{font-size:31.25vw}
    如果设计图为750px,html{font-size:26.67vw}
     
    然后,我们量取得px/2/100即:物理像素/2/100
    
    
  • 相关阅读:
    LIST组件使用总结
    openlayers之interaction(地图交互功能)
    vbind:class绑定样式,决定样式的显示与否
    cesium之measure功能实现
    Cesium渲染效果差,锯齿明显,解决办法
    CSS让DIV层叠 两个DIV或多个DIV顺序重叠加
    ES6之import/export命令
    vantui:
    Openlayers简单要素的添加
    Vue中的this表示?
  • 原文地址:https://www.cnblogs.com/SRH151219/p/10407609.html
Copyright © 2020-2023  润新知