美文网首页
rem不同dpr下设置不同的属性值大小

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

作者: 醉笙情丶浮生梦 | 来源:发表于2018-12-15 16:32 被阅读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;
          }
        }
    

    相关文章

      网友评论

          本文标题:rem不同dpr下设置不同的属性值大小

          本文链接:https://www.haomeiwen.com/subject/yryahqtx.html