关于CSS的缩放

之前一直用zoom来实现的缩放,今天看到有反馈在Firefox上显示异常,才发现该浏览器不支持zoom。所以记录下css的缩放。

使用zoom实现

CSS的zoom属性值可以设置为数字或百分数,当设置1.0或100%时表示不缩放。更大的值放大,更小的值缩小。

1
2
3
4
5
6
7
8
9
/* Keyword value */
zoom: auto;

/* <number> values */
zoom: 0.8;
zoom: 2.0;

/* <percentage> values */
zoom: 150%;

需要指出的是,该属性不是标准属性(2018.8.15),还在草案阶段。正如开篇提到的那样,目前Firefox还不支持,需谨慎使用。

使用scale实现

CSS 函数 scale() 用于修改元素的大小。可以通过向量形式定义的缩放值来放大或缩小元素,同时可以在不同的方向设置不同的缩放值。其给定值是一个二维坐标,分别对应x轴和y轴,如果只给定一个值,那么两个方向的缩放值一样。x与y相等,是等比例缩放,如果不一样,那么缩放后肯定是变形的。

1
transform: scale(1.5,1.5);

scale有别于zoom的地方是,zoom缩放时以左上角为中心,而scale默认是以中心点完成缩放。同时,scale可以进行调节,使用transform-origin。

1
transform-origin: left;

除此之外,scale还有不同于zoom的地方。zoom的缩放可能改变所在盒子的大小;而scale的缩放仅影响元素本身,页面布局不会发生变化。