前言

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

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

效果圖

效果圖

效果圖
 

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

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

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

<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,可以根據(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;

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

最新評論