使用Firefox,您只需按下即可放大整个网页CTRL +.这样做是按比例放大整个网页(字体,图像等).
如何使用简单的CSS复制相同的功能?
是否有类似的东西page-size: 150%(这将使整个页面部分增加x%?)
我刚刚根据他们发给我的Photoshop文件为客户建立了一个网站,然后他们回来告诉我,不知何故,这些PSD的尺寸是他们原来的125%,他们需要将所有内容缩小到现在的80%.
我想我将需要重新剪切所有图像,但我宁愿不重写CSS,所以我正在探索替代方案.
目前,所有值都以像素为单位.我想知道我是否应该尝试找到一个可以获取所有像素值并乘以.8的脚本,或者如果我应该使用px到em转换器然后将html标签中的基本大小设置为80%,或者如果有更好的方法来解决这个问题.
有没有办法在*.css文件中进行浏览器特定的条件CSS?我想定义同一物理文件中的所有样式.
我只需缩放框架内容.在我使用的网页中zoom: 0.75; height: 520px; width: 800px;.如果我增加缩放值,则意味着帧尺寸将增加.
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<STYLE>
#frame { width: 800px; height: 520px; border: 1px solid black; }
#frame { zoom: 0.75; -moz-transform: scale(0.75); -moz-transform-origin: 0 0; }
</STYLE>
</HEAD>
<BODY>
<IFRAME id="frame" src="http://www.google.com"></IFRAME>
</BODY>
</HTML>
Run Code Online (Sandbox Code Playgroud)
在上面的示例HTML页面中,我想在不改变IFRAME大小的情况下缩放IFRAME的内容.
我需要将此 iframe 放入我的页面中,我需要缩放它(变小)
原始页面是http://palweather.ps/temps/days/forecast/120
我尝试了以下代码(我#zoom=75在链接后添加但它不起作用)
<iframe border="0" frameborder="0" height="1300" name="map" src="http://palweather.ps/temps/days/forecast/120#zoom=75" style="width: 100%;" >Your browser does not support inline frames or is currently configured not to display inline frames.</iframe>
Run Code Online (Sandbox Code Playgroud) 我有我的网站上我已经缩小使用此找到答案的内容的iframe的浏览器实例的问题.我注意到因为我使用CSS缩放和转换属性,我在iframe浏览器实例周围获得了额外的空白.填充的iframe加上它周围的空白区域包含我的iframe的原始宽度和高度(在通过变换和缩放缩小之前).
这就是结果:

请注意,灰色突出显示的部分是页面的原始非iframe部分.iframe是页面的非突出显示部分.在原始iframe中,有缩小的浏览器实例和周围的额外空白区域.
什么是摆脱这个空白区域的最佳方法,或者有一种不同的方法来缩小我的iframe,以便不创建额外的空白区域?
这是我目前的CSS:
#iframe {
width: 800px;
height: 800px;
border; 1px solid black;
zoom: 1.00;
-moz-transform: scale(0.65);
-moz-transform-origin: 0 0;
-o-transform: scale(0.65);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.65);
-webkit-transform-origin: 0 0;
}
Run Code Online (Sandbox Code Playgroud)
和HTML:
<iframe id = 'iframe' src = 'http://www.wsj.com'></iframe>
Run Code Online (Sandbox Code Playgroud)
谢谢!