瀏覽器可渲染的最小字號為 12px,但設計圖上經常出現小於該值的字型。對於 11px 我往往就按 12px 處理了,可 9px 這樣的超小字號處理成 12px 絕對太不地道啊。大家可能都知道通過 transform: scale(n) 能達到縮小字型的效果,但你沒有發現並非十分好用?
第一個例子:看到紅框內 9px 的小字型了嗎?用 transform: scale(n) 單獨處理這一行,字型被縮小的同時,上下左右間距也被縮小了。那麼問題來了:你能算出縮小處理後多出了多少空白,能知道使用 margin-left 向左折回多少畫素來實現左對齊嗎?顯然不能!
縮小處理後的留白為 (1 - n) * 原尺寸 / 2 畫素。原尺寸是不定的,因為這行文案中的價格不一定總是 4 位數,並且對於不同尺寸的螢幕它的佔比也不同。所以上述方法縮小了字型卻無法實現左對齊。
給大家解釋一下我所述的留白為何:自行看圖領悟。
transform: scale(n) 處理前:
transform: scale(n) 處理後:
第二個例子:文字居中對齊所以左右有多少留白都無所謂了嗎?我開始也這麼認為,然而......
看似沒有問題,其實當該行文字超出限度時,兩端並不能與其它行對齊。原因必然是縮小處理後產生了留白。
下面介紹本人的解決方案:
.tinyscale {
width: 200%;
margin-left: -50%;
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
複製程式碼
在含小字型的佔寬 100% 的父級容器上新增 tinyscale 類,而後將其中所有的尺寸值及間距值乘 2。
縮小為 0.5 倍後:寬度恢復 100%;尺寸值及間距值恢復為所需值。
縮小處理後的留白為 (1 - 0.5) * 200% / 2 即 50%,所以使用 margin-left 向左折回 50% 即可,這樣的處理無需考慮橫向尺寸不固定的問題。
上述方法的缺點是僅適用於定高的情況,因為縱向的折回值若使用百分比其基準值是寬度非高度......
希望大神們留下更好的解決方案,萬分感謝!
2017/05/16 續更
之前說,不定高的情況無法處理。其實對於外層不定高而內部元素定高的情況是可以處理的。舉個例子:
紅框內的所有元素被一個父級元素包裹,該父級元素是定寬的,我們可以對其進行橫向縮放:
.parent {
width: 200%;
margin-left: -50%;
-webkit-transform: scale(0.5, 1);
transform: scale(0.5, 1);
}
複製程式碼
而內部元素是定高的假設為 20px,我們可以對其進行縱向縮放,並在縱向使用 margin 折回一個固定值 (1 - 0.5) * 20 / 2 畫素:
.child {
margin: -5px 0;
-webkit-transform: scale(1, 0.5);
transform: scale(1, 0.5);
}
複製程式碼
對於內部元素高度不確定的情況,暫未思考出解決方案,望大神指導!
作者:呆戀小喵
我的後花園:sunmengyuan.github.io/garden/
我的 github:github.com/sunmengyuan