Flex程序适应不同屏幕尺寸和分辨率(滚动条)
程序员文章站
2022-05-27 08:29:56
...
FlashBuilder编译后自动生成的xx.html里面定义了浏览器如何显示滚动条。
自动生成的html页面里有如下样式定义：
当Flex Application的高度小于浏览器的高度时，会有一个灰色不可用的滚动条。
当Flex Application的高度大于浏览器的高度时，会出现两个滚动条。
为什么会有两个滚动条呢？
外层滚动条：
默认情况下html的滚动条是会出现的，只不过是灰色不可用状态。
内层滚动条:
body的overflow设为auto，当内容超过浏览器高度时，body的滚动条就会出现。
所以在这里，外层的滚动条基本上是没有意义的，应该手动隐藏，body的设为auto。
添加一行html{ overflow:hidden; }即可变成一个滚动条。当Flex的Application的高度高于浏览器的高度时，出现的滚动条是属于body的，我们只需关闭html的滚动条并设置body{margin:0,padding:0}即可保证只出现body的滚动条并且没有多余的空隙。
解释：
html, body { height:100%; }是为了兼容各个浏览器。
IE 处于非标准模式时，body以窗口为高度参照，body设置为100%就可以使得页面和窗口一样高，body里面的嵌套div也可以扩展到窗口高度，这样的话可以使布局适应浏览器窗口大小。
窗体 》body》div (html ,body {overflow:scroll} 一层滚动条)
但是当处于标准模式时，body以html标签为高度参照，html标签以窗口为参照，所以仅仅body 100%，并不能使它的子div100% 占据整个屏幕，还要使得 html 100%使得 html获得窗口大小才行。
窗体》html》body》div (html ,body {overflow:scroll} 两层滚动条 ,html的滚动条从来不会用到)
当Flex程序的内容高度大于浏览器的高度时，如何使浏览器出现滚动条呢？
如果Application标签下的子内容整体高度或宽度超过了浏览器的高度(浏览器最大化时则为屏幕最佳分辨率)，我们期望浏览器出现滚动条来显示所有内容，那么你必须给Application的width和height属性显示赋值，当然该值应该是大于浏览器高度的，或者大于竖向分辨率。如果你设置Applicatioin的width=100%和height=100%或者不显示赋值，那么代表的意思都是Application的width和height与浏览器的窗口的width和height一致，那么当然是不会出现滚动条的，这时一个屏幕显示不了的内容就没有办法看到了。
案例:
假设你的屏幕分辨率是1024x768，浏览器全屏显示(此时768即为浏览器高度)，
如果Application下有两个Panel，
Panel1 height=500,
Panel2 height=400,
因为500+400>768，
1) 如果你将Application的height设为大于等于900，则浏览器会出现body的滚动条，你可以通过滚动条看到两个Panel的所用内容；
2) 如果你将Application的height设为小于900,但大于768，则浏览器会出现滚动条，但是即使滑动滚动条，你也不能看到Panel2的所用内容，因为Application的高度小于内容的高度900;
3) 如果你将Application的高度设为小于768,那么你既看不到浏览器body的滚动条，也不可能看到所用的内容，超出Application高度的内容直接不显示，所以你没有办法看到。
如何让Flex程序友好的支持不同的屏幕尺寸或屏幕分辨率?
友好: 任何时候都能看到所有内容
问题:
如果Flex程序中的组件既有用百分比表示的，也有用绝对值pixel表示的，那么当将程序在某一特定分辨率调试好后，比如1600x1200,在另一低分辨率下浏览比如1024x768，你可能会发现有一部分内容看不到，而且也没有滚动条(包括浏览器滚动条和组件的滚动条)出现，让你滑动滚动条来浏览显示不下的内容。原因是绝对值定义的组件会保持大小不变，但是当屏幕尺寸变小时，那些用百分比设置的组件可能会没有足够剩余的空间分配，所以显示不出来。
解决方案建议:
1)Flex程序里的高度和宽度都用百分比表示，这样会自动缩放，只是当屏幕很小时，组件会变得很小，难以操作。这种方式下浏览器的滚动条是不会出现的。
2)Flex组件设置具体的宽度和高度，让浏览器在屏幕小时出现滚动条。为了能够做到这一点，你必须显示的设置具体的值给Application标签以及Flex组件(最好是所有组件，如果部分用百分比，屏幕小时，可能分配不到足够的空间，会显示不了内容)的width和height，不能设置百分比。对于Application的宽和高设置，你可用采用简单的方式，既设置最大的屏幕分辨率，这样在小屏幕上，就会出现浏览器的body的滚动条。优点是，你可以定义每个组件的绝对高度和宽度，缺点组件不会在屏幕小时自动缩放，但是每个组件不会变形。
3)禁用浏览器的滚动条，给主要的组件和容器设置绝对的宽度和高度。这样Flex容器会自动出现Flex组件的滚动条。既可以让一部分组件缩放变形，又可以让另一部分组件始终不变形。
如何使Flex组件的父容器出现滚动条
当组件的高度超过父容器的高度时，mx自动会出现滚动条,spark组件需要自己添加scroll组件。
预备知识:
正确认识html与body 文章一
标准与非标准模式
standard模式后，定义和解析将更加严格，所有定义必须从*标签html开始。
可以理解为传统非standard模式定义body的用法，standard模式下都必须在html上定义。
高度100%的意义
认为standard模式下定义容器高度100%无效，是错误的理论。
如果需要body内的容器有100%高度，必须先定义body高度100%。
html与body的默认值
1. IE6.0环境下html默认有2层border的内嵌效果，FF1.5环境下默认则没有，
2. IE6.0和FF1.5环境下的body都有一定的margin值
3. IE6.0环境下html默认就是100%高度，body则不是；FF1.5环境下html和body高度默认都不是100%，需要自定义。
一般情况下统一默认的方案：
html { height:100%; border:0;}body { height:100%; margin:0;}
滚动条的设置
可以这么认为，非standard模式页面的默认滚动条是body的，而standard则是html的。
standard模式下的body默认就没有滚动条，只是html下级的一个容器而已，这样定义会看的更清楚：
定位参照
html { background:#ccc; height:100%; border:0; overflow:scroll;}body { background:#f00; height:100%; margin:0; overflow:scroll;}
相同的道理，standard模式下当使用position方法的时候，其定位参照肯定是html，而不是非standard模式的body。
根据这个特性很容易把层覆盖在body上
参考文档:http://www.alixixi.com/web/a/2008040144652.shtml
正确认识html与body 文章二
1)在Firefox、Chrome中,DOCTYPE为XHTML 1.0 Strict下默认html和body的高度是根据内容定，在body下设置一个高度为height:100%的div并不会充满整个浏览器窗口，必须同时设置html和body的高度为100%方可使该div充满整个浏览器窗口
2)body的overflow默认值：ie6下overflow-y=scroll,overflow-x=auto;Firefox、Chrome默认均为auto. 因此如果不设置body的overflow，默认状态下ie6就会显示不合理的垂直滚动条，设overflow=auto或hidden均可解决
3)各种浏览器body的margin都不是0，因此要保证div100%高并且正好充满整个窗口，须将body的margin设为0
4)手动调整浏览器的高度时：
4-1)如果div的overflow=auto：该div会自动保持100%的高度。当窗口缩小到小于div内容的高度时，div就会出现滚动条， 这时不管body的overflow=auto或hidden，均不会出现body的滚动条。
4-2)如果div的overflow=hidden：该div会自动保持100%的高度。Firefox、Chrome、Safari、ie6的行为是一至的，该div内的溢出 部分内容均会隐藏掉，这时不管body的overflow=auto或hidden，也不会出现body的滚动条。
4-3)如果div的overflow=scroll：该div会自动保持100%的高度。Firefox、Chrome、Safari、ie6的行为是一至的，永远都出现滚动条， 这时不管body的overflow=auto或hidden，均不会出现body的滚动条。
4-4)如果div的overflow没有设置或设为visible：Firefox、Chrome、Safari的行为是一至的，该div会自动保持100%的高度，div内的溢出部分内 容会溢出显示，当窗口高度小于div的内容高度时，若body的overflow=auto，就会出现body的滚动条。IE6则比较怪异，在 窗口高度不小于div内容的高度时，该div会自动保持100%的高度；但当窗口高度小于div内容的高度时，该div不会自动保持 100%的高度，而是等于内容的高度不再变，内容不会出现溢出效果，此时若body的overflow=auto，就会出现body的滚动条。
总结:html和body的高度设为100%，body设margin=0、overflow=hidden，div设overflow=auto，各浏览器表现一至，效果最佳
自动生成的html页面里有如下样式定义：
<style type="text/css" media="screen">
html, body { height:100%; }
body { margin:0; padding:0; overflow:auto; text-align:center;
background-color: #ffffff; }
object:focus { outline:none; }
#flashContent { display:none; }
</style>
当Flex Application的高度小于浏览器的高度时，会有一个灰色不可用的滚动条。
当Flex Application的高度大于浏览器的高度时，会出现两个滚动条。
为什么会有两个滚动条呢？
外层滚动条：
默认情况下html的滚动条是会出现的，只不过是灰色不可用状态。
内层滚动条:
body的overflow设为auto，当内容超过浏览器高度时，body的滚动条就会出现。
所以在这里，外层的滚动条基本上是没有意义的，应该手动隐藏，body的设为auto。
添加一行html{ overflow:hidden; }即可变成一个滚动条。当Flex的Application的高度高于浏览器的高度时，出现的滚动条是属于body的，我们只需关闭html的滚动条并设置body{margin:0,padding:0}即可保证只出现body的滚动条并且没有多余的空隙。
解释：
html, body { height:100%; }是为了兼容各个浏览器。
IE 处于非标准模式时，body以窗口为高度参照，body设置为100%就可以使得页面和窗口一样高，body里面的嵌套div也可以扩展到窗口高度，这样的话可以使布局适应浏览器窗口大小。
窗体 》body》div (html ,body {overflow:scroll} 一层滚动条)
但是当处于标准模式时，body以html标签为高度参照，html标签以窗口为参照，所以仅仅body 100%，并不能使它的子div100% 占据整个屏幕，还要使得 html 100%使得 html获得窗口大小才行。
窗体》html》body》div (html ,body {overflow:scroll} 两层滚动条 ,html的滚动条从来不会用到)
当Flex程序的内容高度大于浏览器的高度时，如何使浏览器出现滚动条呢？
如果Application标签下的子内容整体高度或宽度超过了浏览器的高度(浏览器最大化时则为屏幕最佳分辨率)，我们期望浏览器出现滚动条来显示所有内容，那么你必须给Application的width和height属性显示赋值，当然该值应该是大于浏览器高度的，或者大于竖向分辨率。如果你设置Applicatioin的width=100%和height=100%或者不显示赋值，那么代表的意思都是Application的width和height与浏览器的窗口的width和height一致，那么当然是不会出现滚动条的，这时一个屏幕显示不了的内容就没有办法看到了。
案例:
假设你的屏幕分辨率是1024x768，浏览器全屏显示(此时768即为浏览器高度)，
如果Application下有两个Panel，
Panel1 height=500,
Panel2 height=400,
因为500+400>768，
1) 如果你将Application的height设为大于等于900，则浏览器会出现body的滚动条，你可以通过滚动条看到两个Panel的所用内容；
2) 如果你将Application的height设为小于900,但大于768，则浏览器会出现滚动条，但是即使滑动滚动条，你也不能看到Panel2的所用内容，因为Application的高度小于内容的高度900;
3) 如果你将Application的高度设为小于768,那么你既看不到浏览器body的滚动条，也不可能看到所用的内容，超出Application高度的内容直接不显示，所以你没有办法看到。
如何让Flex程序友好的支持不同的屏幕尺寸或屏幕分辨率?
友好: 任何时候都能看到所有内容
问题:
如果Flex程序中的组件既有用百分比表示的，也有用绝对值pixel表示的，那么当将程序在某一特定分辨率调试好后，比如1600x1200,在另一低分辨率下浏览比如1024x768，你可能会发现有一部分内容看不到，而且也没有滚动条(包括浏览器滚动条和组件的滚动条)出现，让你滑动滚动条来浏览显示不下的内容。原因是绝对值定义的组件会保持大小不变，但是当屏幕尺寸变小时，那些用百分比设置的组件可能会没有足够剩余的空间分配，所以显示不出来。
解决方案建议:
1)Flex程序里的高度和宽度都用百分比表示，这样会自动缩放，只是当屏幕很小时，组件会变得很小，难以操作。这种方式下浏览器的滚动条是不会出现的。
2)Flex组件设置具体的宽度和高度，让浏览器在屏幕小时出现滚动条。为了能够做到这一点，你必须显示的设置具体的值给Application标签以及Flex组件(最好是所有组件，如果部分用百分比，屏幕小时，可能分配不到足够的空间，会显示不了内容)的width和height，不能设置百分比。对于Application的宽和高设置，你可用采用简单的方式，既设置最大的屏幕分辨率，这样在小屏幕上，就会出现浏览器的body的滚动条。优点是，你可以定义每个组件的绝对高度和宽度，缺点组件不会在屏幕小时自动缩放，但是每个组件不会变形。
3)禁用浏览器的滚动条，给主要的组件和容器设置绝对的宽度和高度。这样Flex容器会自动出现Flex组件的滚动条。既可以让一部分组件缩放变形，又可以让另一部分组件始终不变形。
如何使Flex组件的父容器出现滚动条
当组件的高度超过父容器的高度时，mx自动会出现滚动条,spark组件需要自己添加scroll组件。
预备知识:
正确认识html与body 文章一
标准与非标准模式
standard模式后，定义和解析将更加严格，所有定义必须从*标签html开始。
可以理解为传统非standard模式定义body的用法，standard模式下都必须在html上定义。
高度100%的意义
认为standard模式下定义容器高度100%无效，是错误的理论。
如果需要body内的容器有100%高度，必须先定义body高度100%。
html与body的默认值
1. IE6.0环境下html默认有2层border的内嵌效果，FF1.5环境下默认则没有，
2. IE6.0和FF1.5环境下的body都有一定的margin值
3. IE6.0环境下html默认就是100%高度，body则不是；FF1.5环境下html和body高度默认都不是100%，需要自定义。
一般情况下统一默认的方案：
html { height:100%; border:0;}body { height:100%; margin:0;}
滚动条的设置
可以这么认为，非standard模式页面的默认滚动条是body的，而standard则是html的。
standard模式下的body默认就没有滚动条，只是html下级的一个容器而已，这样定义会看的更清楚：
定位参照
html { background:#ccc; height:100%; border:0; overflow:scroll;}body { background:#f00; height:100%; margin:0; overflow:scroll;}
相同的道理，standard模式下当使用position方法的时候，其定位参照肯定是html，而不是非standard模式的body。
根据这个特性很容易把层覆盖在body上
参考文档:http://www.alixixi.com/web/a/2008040144652.shtml
正确认识html与body 文章二
1)在Firefox、Chrome中,DOCTYPE为XHTML 1.0 Strict下默认html和body的高度是根据内容定，在body下设置一个高度为height:100%的div并不会充满整个浏览器窗口，必须同时设置html和body的高度为100%方可使该div充满整个浏览器窗口
2)body的overflow默认值：ie6下overflow-y=scroll,overflow-x=auto;Firefox、Chrome默认均为auto. 因此如果不设置body的overflow，默认状态下ie6就会显示不合理的垂直滚动条，设overflow=auto或hidden均可解决
3)各种浏览器body的margin都不是0，因此要保证div100%高并且正好充满整个窗口，须将body的margin设为0
4)手动调整浏览器的高度时：
4-1)如果div的overflow=auto：该div会自动保持100%的高度。当窗口缩小到小于div内容的高度时，div就会出现滚动条， 这时不管body的overflow=auto或hidden，均不会出现body的滚动条。
4-2)如果div的overflow=hidden：该div会自动保持100%的高度。Firefox、Chrome、Safari、ie6的行为是一至的，该div内的溢出 部分内容均会隐藏掉，这时不管body的overflow=auto或hidden，也不会出现body的滚动条。
4-3)如果div的overflow=scroll：该div会自动保持100%的高度。Firefox、Chrome、Safari、ie6的行为是一至的，永远都出现滚动条， 这时不管body的overflow=auto或hidden，均不会出现body的滚动条。
4-4)如果div的overflow没有设置或设为visible：Firefox、Chrome、Safari的行为是一至的，该div会自动保持100%的高度，div内的溢出部分内 容会溢出显示，当窗口高度小于div的内容高度时，若body的overflow=auto，就会出现body的滚动条。IE6则比较怪异，在 窗口高度不小于div内容的高度时，该div会自动保持100%的高度；但当窗口高度小于div内容的高度时，该div不会自动保持 100%的高度，而是等于内容的高度不再变，内容不会出现溢出效果，此时若body的overflow=auto，就会出现body的滚动条。
总结:html和body的高度设为100%，body设margin=0、overflow=hidden，div设overflow=auto，各浏览器表现一至，效果最佳
下一篇： Menu菜单的几种分类