前端开发访问器字体样式小于12px的处理方法

2021-01-20 20:37 jianzhan

序言

近期做新项目时,UI设计方案的字体样式10px,看实际效果图时发现字体样式依然蛮大,更改12px时字体样式還是那末大,更改到14px时,字体样式增大了,发现规律性,才了解原先访问器以便让客户字体样式看的清晰,最少设定为12px。如何办?设计方案便是10px?

最后完成的实际效果图以下:

实际效果图

实际效果图

实际效果图
 

百度搜索时,各位在网上高手说运用transform: scale(0.5)能够考虑规定,实际应用时,发现把全部div宽高都放缩了,不考虑规定,

反过来想,能够把红点和字放在两个div上,红点操纵宽高,字体样式上的变小用transform: scale便可以考虑要求了。

实际完成编码以下:

<div v-if="cartNum>=1" class="cartData">
     <div class="Num" v-if="cartNum>=1&&cartNum<=99">{{cartNum}}</div>
     <div class="Num" v-else-if="cartNum>99">99+</div>
</div>

css一部分:
 

.cartData{
    height: .75rem;
    min-width: .75rem;
    border-radius: .375rem;
    background: red;
    color: white;
    text-align: center;
    line-height: .75rem;
  }
  .Num{
    font-size: 20px;
    -webkit-transform: scale(0.5);
    }

上面字体样式就14*0.8 = 11.2px,能够依据要求做实际调剂。

只这样写可不容易适配IE、FF哦,因此再给1个适配性写法:

.Num{
    font-size: 14px;
    -webkit-transform: scale(0.8);
 }
.Numsize-font{
  font-size: 14*0.8px;
}

留意:

transform:scale()这个特性只能够放缩能够界定宽高的元素,而行内元素是沒有宽高的,大家能够再加1个display:inline-block;

总结

以上便是这篇文章内容的所有內容了,期待本文的內容对大伙儿的学习培训或工作中具备1定的参照学习培训使用价值,假如有疑惑大伙儿能够留言沟通交流,感谢大伙儿对脚本制作之家的适用。