rem不同dpr下设置不同的属性值大小

2018-12-15  本文已影响0人  醉笙情丶浮生梦

使用flexible.js动态设置rem自适应,
单有时候还是有些效果在不同的dpr下显示效果不同,
这时候就要单独为不同的dpr设置不同的属性值大小。
获取dpr的值

var dpr = document.documentElement.getAttribute('data-dpr');

设置不同的大小

.gradeText{
      display: inline-block;
      vertical-align: top;
      [data-dpr="2"] & {
        //inline-flex 使弹性容器成为单个不可分的行内级元素
        //前缀标记会附加给 display 属性值,而不是加给 display 属性本身
        //比如 display : -webkit-flex
        display: inline-flex;
        height: 28 / @font-size-base;
        line-height: 0;
        //下面两个一起用才有效果
        //align-items 属性定义flex子项在flex容器的对其方式 center 居中
        align-items: center;
        //设置一个元素的垂直对其方式 top 把元素的顶端与行中最高元素的顶端对齐
        vertical-align: top;
      }
    }
上一篇下一篇

猜你喜欢

热点阅读