css3怎麼縮小文字

css3縮小文字的方法：先建立一個HTML範例檔案；然後定義一個p標籤；最後透過「transform:scale(x)」樣式實作文字縮小即可。

本教學操作環境：windows7系統、HTML5&&CSS3版本、Dell G3電腦。

推薦：css影片教學

css3縮小文字

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怎麼縮小文字的詳細內容。更多資訊請關注PHP中文網其他相關文章！