關於transform屬性導致字型模糊的問題

2022-07-22 16:48:18 字數 529 閱讀 3403

最近寫專案時也碰到了字型會模糊的情況,先簡單描述一下問題

乙個寬度固定但是高度auto的彈窗讓他在螢幕當中展示(不能使用flex屬性),

position: fixed

; top:

50%;

left:

50%;

transform: translate(-50%, -50%);

用了以上**讓彈窗居中,後來發現有的情況會使文字顯示的很模糊,感官很不舒服,

開始發現注釋掉全域性的padding :0;能解決這個問題。後來發現padding不是這個問題的根源。

經過各種各樣的嘗試發現在元素高度為基數或小數時會出現這種情況,使得50%無法得到乙個整數。

那解決這個問題就可以用已經幾種方式解決

1.把彈框的寬高都設為整數,此案例不適用,因為高度要自適應

2.可以改變居中的方式

3.調節translate的值使檢視能清晰

4.最後這種方法是偶然發現的,將fixed的定位方式換成absolute也可以解決

關於transform屬性的詳細介紹

了解transform的3d效果之前,先了解一下座標和透視 perspective 在了解透視之前,首先要先了解座標軸。3d變形與2d變形最大的不同就在於其參考的座標軸不同。2d變形的座標軸是平面的,只存在x軸和y軸,而3d變形的座標軸則是x y z三條軸組成的立體空間,x軸正向 y軸正向 z軸正向...

transform屬性總結

用於向元素應用2d或3d轉換 我們可以用他對元素進行旋轉,縮放,移動,傾斜 transform的值 2d轉換translate x,y 3d轉換translate x,y,z translatex x 轉換x軸的值 translatey y 轉換y軸的值 3d轉換translatez z scale...

UIView 常用屬性 transform

transform 旋轉角度的引數是弧度值,弧度制是乙個浮點數,180度的角度對應的弧度值是pi 90 pi 2,45 pi 4 使用transformmake 方法是相對檢視初始位置的形變 transform cgaffinetransformrotate subview1.transform,m...