对CSS中zoom属性的总结
程序员文章站
2022-04-19 10:09:55
...
在css中,zoom属性作用是设置或检索对象的缩放比例。对应的脚本特性为zoom。虽然很多人都知道,但是任然有人不知道zoom的具体的用法,或者没有深究过,下面就把zoom的用法总结一下:
CSS中zoom:1的作用
兼容IE6、IE7、IE8浏览器,经常会遇到一些问题,可以使用zoom:1来解决,有如下作用:
触发IE浏览器的haslayout
解决ie下的浮动,margin重叠等一些问题。
2.CSS中zoom属性或overflow:auto属性清除浮动
其实在CSS中的Zoom这个属性一般不为人知,甚至有些CSS手册中都查询不到。其实Zoom属性是IE浏览器的专有属性,Firefox等浏览器不支持。它可以设置或检索对象的缩放比例。除此之外,它还有其他一些作用,比如触发ie的hasLayout属性,清除浮动、清除margin的重叠等。
zoom和transform:scale()都可以用于缩放,目前移动端存在各种各样不同屏幕大小的手机,为了兼容不同宽度的屏幕,我们可以基于某一屏幕宽度大小(比如iPhone5的320,这个根据设计稿来)做出页面后,再对页面进行缩放以兼容其他屏幕宽度。
zoom : normal | number
normal : 默认值。使用对象的实际尺寸
number : 百分数 | 无符号浮点实数。浮点实数值为1.0或百分数为100%时相当于此属性的 normal 值用白话讲解就是zoom:后面的数字即放大的倍数,可 以是数值,也可以是百分比。如:zoom:1,zoom:120%。
ps:网上都说是ie的专有属性,本人亲测chrome下也可以使用;(Firefox浏览器不支持)
zoom属性相关的问答:
3.使用css中的zoom:50%后对页面文字大小不生效,什么原因?
以上就是对CSS中zoom属性的总结的详细内容,更多请关注其它相关文章!
推荐阅读
-
浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
-
谈谈对css属性box-sizing的了解
-
在css3中background-clip属性与background-origin属性的用法介绍
-
CSS3线性渐变简单实现以及该属性在浏览器中的不同
-
对Python中数组的几种使用方法总结
-
Vue.js中对css的操作(修改)具体方式详解
-
Java8利用stream的distinct()方法对list集合中的对象去重和抽取属性去重
-
实例讲解CSS3中的box-flex弹性盒属性布局
-
在python中对变量判断是否为None的三种方法总结
-
使用CSS3中的calc()属性来以算式表达尺寸数值