美文网首页
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下设置不同的属性值大小

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

  • 移动端1px边框问题

    解决方案一 使用rem为单位。 使用js获取dpr值动态计算视口缩放,设置viewport content属性。 ...

  • css 毛玻璃

    backdrop-filter 属性设置不同值。

  • 笔记

    px,em,rem,单位的使用和响应式的实现 px是设置固定值的单位,设置是多少,在不同的分辨率下就是多少; em...

  • REM响应式布局理解与Swiper的使用

    REM响应式布局 REM: 根据根元素html的font-size值来设置大小EM: 根据body元素font-...

  • react中props类型检测

    安装 运用 设置属性为必须传递的值 多重嵌套类型检测 shape检测不同对象的不同属性的不同数据类型 可以检测的类型

  • OC代码规范2

    存取方法(Accessor Methods) 存取方法是指用来获取和设置类属性值的方法,属性的不同类型,对应着不同...

  • Rem布局, 媒体查询

    设置根节点fontSize大小,以适应不同分辨率的设备 通过上面的设置后 1rem = 10px; 媒体查询 需要...

  • 秒懂imageView的scaleType属性

    一、设置后的效果图 imageview设置scaleType属性后不同值的效果 1、原图比imageview大设置...

  • 移动端适配方案(待续)

    meta viewport 媒体查询 根据查询结果选择不同的css样式 动态rem 通过根元素的字体大小来设置元素...

网友评论

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

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