解決前端瀏覽器字型小於12px辦法
阿新 • • 發佈:2018-12-12
做專案時,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哦,所以再給一個相容性寫法:
.Num{
font-size: 14px;
-webkit-transform: scale(0.8);
}
.Numsize-font{
font-size: 14*0.8px;
}
注意:transform:scale()
這個屬性只可以縮放可以定義寬高的元素,而行內元素是沒有寬高的,我們可以加上一個display:inline-block;