前言
最近做項目時，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;
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對武林網的支持。
新聞熱點
疑難解答
