控制页面缩放 css--zoom_style zoom

作者：小丑西瓜9 | 2024-03-21 11:23:32

踩

style zoom

由于最初设计页面过于下，在大屏幕下网页显示很小，

找个好久，大部分的做法是将所有css提取出来，重新设置，由js调用

今天第一次看到一个css样式，便是zoom，我试着用了，zoom在IE和chrom下正常，Firefox不支持

Css中zoom属性的介绍

CSS中的Zoom属性，一般不为人知，甚至有些CSS手册中都查询不到。
其实Zoom属性是IE浏览器的专有属性，Firefox等浏览器不支持。它可以设置或检索对象的缩放比例。除此之外，它还有其他一些小作用，比如触发ie的hsasLayout属性，清除浮动、清除margin的重叠等。

css中的zoom的作用
1、检查页面的标签是否闭合
不要小看这条，也许折腾了你两天都没有解决的 CSS BUG 问题，却仅仅源于这里。毕竟页面的模板一般都是由开发来嵌套的，而他们很容易犯此类问题。
快捷提示：可以用 Dreamweaver 打开文件检查，一般没有闭合的标签，会黄色背景高亮。

2、样式排除法
有些复杂的页面也许加载了 N 个外链 CSS 文件，那么逐个删除 CSS 文件，找到 BUG 触发的具体 CSS 文件，缩小锁定的范围。

对于刚才锁定的问题 CSS 样式文件，逐行删除具体的样式定义，定位到具体的触发样式定义，甚至是具体的触发样式属性。

3、模块确认法
有时候我们也可以从页面的 HTML 元素出发。删除页面中不同的 HTML 模块，寻找到触发问题的 HTML 模块。

4、检查是否清除浮动
其实有不少的 CSS BUG 问题是因为没有清除浮动造成的。养成良好的清除浮动的习惯是必要的，推荐使用无额外 HTML 标签的清除浮动的方法（尽量避免使用 overflow:hidden;zoom:1 的类似方法来清除浮动，会有太多的限制性）。

5、检查 IE 下是否触发 haslayout
很多的 IE 下复杂 CSS BUG 都与 IE 特有的 haslayout 息息相关。熟悉和理解 haslayout 对于处理复杂的 CSS BUG 会事半功倍。推荐阅读 old9 翻译的《On having layout》（如果无法翻越穿越伟大的 GFW，可阅读蓝色上的转帖）
快捷提示：如果触发了 haslayout，IE 的调试工具 IE Developer Toolbar 中的属性中将会显示 haslayout 值为 -1。

6、边框背景调试法
故名思议就是给元素设置显眼的边框或者背景（一般黑色或红色），进行调试。此方法是最常用的调试 CSS BUG 的方法之一，对于复杂 BUG 依旧适用。经济实惠还环保^^
最后想强调一点的是，养成良好的书写习惯，减少额外标签，尽量语义，符合标准，其实可以为我们减少很多额外的复杂 CSS BUG，更多的时候其实是我们自己给自己制造了麻烦。希望你远离 BUG ，生活越来越美好。

Zoom的使用方法：
zoom : normal | number
normal :　默认值。使用对象的实际尺寸
number:　百分数 | 无符号浮点实数。浮点实数值为1.0或百分数为100%时相当于此属性的 normal 值用白话讲解就是zoom:后面的数字即放大的倍数，可以是数值，也可以是百分比。如：zoom:1，zoom:120%。而这个属性只要在IE中才起作用，所以很少用到它的实际用途，而最经常用到作用是清除浮动等，如：

.border{

           border:1px solid #CCC;

            padding:2px;

            overflow:hidden;

   zoom:1;

}

zoom是CSS hack中专对IE6起作用的部分。IE6浏览器会执行zoom:1表示对象的缩放比例，但这里 overflow:hidden;和zoom:1;是连起来用的，作用是清除border内部浮动。
同理，还可以使用同样方法清除margin属性在IE浏览器中的重叠问题。

过改变HTML文档中的 body 标签的 zoom 样式值对网页进行缩放


<HTML>
	<HEAD>
		<TITLE>Zoom Demo</TITLE>
		<SCRIPT>
		function zoomIn() {
			newZoom= parseInt(oZoom.style.zoom)+10+'%'
			oZoom.style.zoom =newZoom;
			oCode.innerText='zoom: '+newZoom+'';
		}
		function zoomOut() {
			newZoom= parseInt(oZoom.style.zoom)-10+'%'
			oZoom.style.zoom =newZoom;
			oCode.innerText='zoom: '+newZoom+'';
		}
		function changeZoom() {
			newZoom= parseInt(oSlider.value)
			oZoom.style.zoom=newZoom+'%';
			oCode.innerText='zoom: '+newZoom+'%';
		}
		function changeZoom2(oSel) {
			var index = oSel.selectedIndex;
			if(index > 0){
				newZoom= oSel.options[index].innerText
				oZoom.style.zoom=newZoom;
				oCode.innerText='zoom: '+newZoom+'';
			}
		}
</SCRIPT>
	</HEAD>
	<BODY ID="oZoom" οnlοad="oZoom.style.zoom='100%';oCode.innerText='zoom: 100%'; ">
		<!-- The zoomable area container -->
		<DIV STYLE="width:800px;height:600px; background-color:black; vertical-align: middle;padding:25px; font-family:arial; font-weight:bold; color:white;z-index:3" ALIGN="center">
			<!-- The zoomable area -->
			<DIV  STYLE="zoom:100%" ALIGN="center">
				<H1>Welcome to Seattle!</H1>
				<IMG SRC="http://images13.51.com/7/b/b4/b5/hemingwang0902/a4b004afbd59f72bbcea6312cd96373e.jpg" />
				<BR />
				A great city in the beautiful state of Washington.
			</DIV>
		</DIV>
		<!-- Displayed code -->
		<DIV STYLE="border:1px solid black; width:800px; height:90px; padding:1px;padding-left:10px; background-color:white; z-index:3;">
			<SPAN><DIV style="</SPAN>
			<SPAN STYLE="font-weight:bold; font-family:verdana; color:red;font-size:9pt" CLASS="coder" ID="oCode"></SPAN>
			<SPAN>"></SPAN>
			<DIV><H1> Welcome to seattle!</H1></DIV>
			<DIV><IMG SRC="http://images13.51.com/7/b/b4/b5/hemingwang0902/a4b004afbd59f72bbcea6312cd96373e.jpg" /></DIV>
			<DIV><br />A great city in the beautiful state of Washington.</DIV>
			<DIV CLASS="coder"></DIV></DIV>
		</DIV>
		</DIV>
		<DIV ID="oControls" STYLE=" width:800px; height:100px; background-color:gray; color:white; font-family:verdana; font-size:11; font-weight:normal;padding:10px; z-index:3; text-align:center; border:1px solid black;text-align:left;" >
			<DIV STYLE="padding-left:65px" >
				The code used to generate the image is shown in the area above.
				<BR /><BR />
				Modify the image using the selections below or the
				<BR />
				slider control above and to the left of this window.
			</DIV>
			<HR />
			<DIV ALIGN=CENTER>
				<SELECT ID="percent" οnchange="changeZoom2(percent); ">
					<OPTION SELECTED>Use Percentage Value</OPTION>
					<OPTION>10%</OPTION>
					<OPTION>25%</OPTION>
					<OPTION>50%</OPTION>
					<OPTION>75%</OPTION>
					<OPTION>100%</OPTION>
					<OPTION>150%</OPTION>
					<OPTION>200%</OPTION>
				</SELECT>
				<SELECT ID="normal" οnchange="changeZoom2(normal); ">
					<OPTION SELECTED>Use Number Value</OPTION>
					<OPTION>0.1</OPTION>
					<OPTION>0.25</OPTION>
					<OPTION>0.5</OPTION>
					<OPTION>0.75</OPTION>
					<OPTION>1.0</OPTION>
					<OPTION>1.5</OPTION>
					<OPTION>2.0</OPTION>
				</SELECT>
				<HR />
			</DIV>
		</DIV>
	</BODY>
</HTML>

在FF浏览器中,虽然没有zoom,但是有一个比zoom更加强大的私有属性-moz-transform(FF3.5+)和-webkit-transform(Safari 3.1+和Chrome支持)
这是一个提前实现的css3属性,不仅仅有放大功能,还有旋转,变形等等.参数可以为一个CSS变形函数列表,这些函数可以包括旋转.缩放.倾斜和位移.或者,通过定义二维Affine
变形矩阵来同时应用多个变形效果
例子如下:
旋转和倾斜:-moz-transform: rotate(-15deg) skew(-15deg, -15deg);
mozilla原文如下:https://developer.mozilla.org/en/CSS/-moz-transform#CSS_transform_functions
可以看到支持的浏览器如下:
IE5.5+(通过滤镜实现)
SF3.1+ chrome1+
OP一直没有实现...

解决局部不缩放

IE6,7下,子元素为absolute时,父元素必须为relative或者absolute,否则子元素不生效

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】