使用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;
}
}
网友评论