AUBREY

SOMETIMES LOVE JUST AIN'T ENOUGH

CSS:排序小三角,兼容IOS/Android

设计稿:

HTML代码(使用的iconfont):

<div class="triangle">
  <i class="iconfont icon-upSJ"></i>
  <i class="iconfont icon-downSJ"></i>
</div>

 

CSS代码1:

i {
  font-size: 0.12rem; // 75*0.12 = 9px
  line-height: 1.2em;
}

代码1在Chrome的效果:

问题:PC端chrome无法显示12px以下的字体;移动端IOS没问题,但是Android有些机型不行(比如步步高xx机型,两个箭头完全上下分离,且偏大很多),有些可以

 

最终方案:


先按照设计稿将font-size放大2倍,然后用scale缩小1倍

i {
  font-size: 0.24rem; // 先放大2倍
  transform: scale(0.5); // 再缩小1倍
  line-height: 0.16rem; // 这个根据实际项目添加
}

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注