真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

前端瀏覽器字體小于12px怎么辦

這篇文章將為大家詳細講解有關(guān)前端瀏覽器字體小于12px怎么辦，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

成都地區(qū)優(yōu)秀IDC服務(wù)器托管提供商(創(chuàng)新互聯(lián)建站).為客戶提供專業(yè)的德陽機房托管,四川各地服務(wù)器托管,德陽機房托管、多線服務(wù)器托管.托管咨詢專線：028-86922220

前言

最近做項目時，UI設(shè)計的字體10px,看效果圖時發(fā)現(xiàn)字體仍然蠻大，改變12px時字體還是那么大，改變到14px時，字體變大了，發(fā)現(xiàn)規(guī)律，才知道原來瀏覽器為了讓用戶字體看的清楚，最小設(shè)置為12px。怎么辦？設(shè)計就是10px?

最終實現(xiàn)的效果圖如下：

前端瀏覽器字體小于12px怎么辦

效果圖

前端瀏覽器字體小于12px怎么辦

效果圖

前端瀏覽器字體小于12px怎么辦

效果圖

百度時，各位網(wǎng)上大神說利用transform: scale(0.5)可以滿足要求，具體使用時，發(fā)現(xiàn)把整個div寬高都縮放了，不滿足要求，

反過來想，可以把紅點和字放在兩個div上，紅點控制寬高，字體上的縮小用transform: scale就可以滿足需求了。

具體實現(xiàn)代碼如下：

=1" class="cartData">
     =1&&cartNum<=99">{{cartNum}}

99">99+

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,可以根據(jù)需求做具體調(diào)整。

只這樣寫可不會兼容IE、FF哦，所以再給一個兼容性寫法：

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

注意:

transform:scale()這個屬性只可以縮放可以定義寬高的元素，而行內(nèi)元素是沒有寬高的，我們可以加上一個display:inline-block;

關(guān)于“前端瀏覽器字體小于12px怎么辦”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

http://weahome.cn/article/jjdscj.html