1. 程式人生 > >css3 transform:scale(x)實現字體的縮放:

css3 transform:scale(x)實現字體的縮放:

edi 不變 screen info html -s clas 實現 背景

css3 transform:scale(x)字體的縮放:

transform:scale(x),針對於整體的縮放,縮放的整體包括寬,高,背景。這自然對於內聯元素就無法使用此屬性,最好使用無屬性的span轉換成塊元素或者行內塊元素進行設置,這樣保證外面元素不變的情況下實現自身的縮放。

CSS:

@media screen and (min-width:320px){font-size: 12px;}
@media screen and (min-width:360px){font-size: 14px;}
@media screen and (min-width:420px){font-size: 16px;}
@media screen and (min-width:480px){font-size: 20px;} @media screen and (min-width:520px){font-size: 24px;} @media screen and (min-width:640px){font-size: 28px;} @media screen and (min-width:750px){font-size: 32px;} .font1{font-size: 1rem;}.displayIB{display:inline-block;}.scaleFont{transform: scale(0.58
);}

HTML:

<p class="font1">測試<span class="displayIB scaleFont">888</span>測試</p>

技術分享圖片

css3 transform:scale(x)實現字體的縮放: