查看: 11271|回复: 5

layout如何实现按屏幕大小变化而自动按比例缩放 [复制链接]

a123

新手上路

Rank: 1

电梯直达

楼主

发表于 2012-10-25 13:49:09 |只看该作者 |倒序浏览

如下例：
<div class="mini-splitter" style="width:100%;height:100%;">
<div size="30%" showCollapseButton="true" >
      1
</div>
<div showCollapseButton="true">
      2
</div>
</div>

要求随浏览器画面大小变化，左边的layout始终保持size="30%"的比例宽的。

收藏0

factory

超级版主

Rank: 8 Rank: 8

沙发

发表于 2012-10-25 13:58:04 |只看该作者

百分比就是按照当前浏览器画面的大小来变化的了。

a123

新手上路

Rank: 1

板凳

发表于 2012-10-25 14:26:15 |只看该作者

factory 发表于 2012-10-25 13:58
百分比就是按照当前浏览器画面的大小来变化的了。

当画面显示出来后，再次调整浏览器画面的大小，layout没有变化

factory

超级版主

Rank: 8 Rank: 8

地板

发表于 2012-10-25 14:39:27 |只看该作者

a123 发表于 2012-10-25 14:26
当画面显示出来后，再次调整浏览器画面的大小，layout没有变化

有效果的啊，
你的layout是不是设置的百分比？
设置百分比之后，layout的高度和宽度是由他的父级容器来决定的，如果父级容器的高度宽度是固定的话，那么layout的百分比其实也是固定的。
你可以这样测试下，body，html设置高宽都为100%，里面只放layout，他的宽度高度为百分比，然后再调节浏览器的窗口大小，看看是不是layout做对应的自动调整了

a123

新手上路

Rank: 1

5^#

发表于 2012-10-25 15:18:38 |只看该作者

factory 发表于 2012-10-25 14:39
有效果的啊，
你的layout是不是设置的百分比？
设置百分比之后，layout的高度和宽度是由他的父级容器来决 ...

如下代码，在chrome里有效，在IE8里无效。不知有没有解决的办法？
<html>
<head>
      <title></title>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <link href="resources/css/demo.css" rel="stylesheet" type="text/css" />
      <script src="resources/js/boot.js" type="text/javascript"></script>
</head>
<body>
      <div class="mini-splitter" style="width: 100%;height: 100%;">
         <div size="50%" showCollapseButton="true" >
            1
         </div>
         <div showCollapseButton="true">
            2
         </div>
      </div>
</body>
</html>

factory

超级版主

Rank: 8 Rank: 8

6^#

发表于 2012-10-25 15:30:31 |只看该作者

a123 发表于 2012-10-25 15:18
如下代码，在chrome里有效，在IE8里无效。不知有没有解决的办法？

你的页面头部没加
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
这个是miniui约定必须要加，不然样式什么的会有差错

返回列表

		自动登录	找回密码
密码			立即注册