方法有兩種:
一:采用css的zoom屬性
zoom縮放會將元素保持在左上角,並且會有毛邊,可能會稍稍改變元素原來的形狀。
二:采用css3的transform:scale屬性
zoom縮放會將元素保持在中間,不會改變元素原來的形狀,但是可能會有稍稍的模糊。
整體來說zoom屬性與transform:scale屬性主要存在如下幾點差異
1、zoom的縮放是相對於左上角的;而scale默認是居中縮放;
2、zoom的縮放改變了元素占據的空間大小;而scale的縮放占據的原始尺寸不變,頁面布局不會發生變化;
3、zoom和scale對元素的渲染計算方法可能有差異(需要自己動手,用高清圖,仔細去看其中的區別)。
4、對文字的縮放規則不一致。zoom縮放依然受限於最小12像素中文大小限制;而scale就是純粹的對圖形進行比例控制,文字50%原來尺寸。
最后Anne在這里建議大家如果需要在小程序開發中修改單選框和復選框大小最好采用transform:scale屬性,因為采用css的zoom屬性時,形狀被改變的有些明顯,體驗很不好。
