jQuery MiniUI

标题: layout如何实现按屏幕大小变化而自动按比例缩放 [打印本页]

作者: a123 时间: 2012-10-25 13:49:09 标题: layout如何实现按屏幕大小变化而自动按比例缩放

如下例：
<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%"的比例宽的。

作者: factory 时间: 2012-10-25 13:58:04

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

作者: a123 时间: 2012-10-25 14:26:15

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

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

作者: factory 时间: 2012-10-25 14:39:27

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

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

作者: a123 时间: 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 时间: 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约定必须要加，不然样式什么的会有差错

欢迎光临 jQuery MiniUI (http://miniui.com/discuss/)