`
其实不坏
  • 浏览: 53750 次
  • 性别: Icon_minigender_1
  • 来自: 福建
社区版块
存档分类
最新评论

flex 自适应

    博客分类:
  • Flex
阅读更多
在自己项目里的需求是:flex加载flash生成的swf,同时自适应屏幕然后根据屏幕的变化再做变化。
从网上找来得资料

有的时候我们想通过swfLoader来加载一个外部的swf文件,但是头疼的问题就是当我们把浏览器放大放小的时候加载的swf大小并不发生变化。

现在说一下swfLoader他默认则会缩放内容以适应SWFLoader控件并且保持加载内容的高宽比例。

但是我们有时候需要通过swfLoader缩放来适应加载的内容。

下面说一下这方面总结的经验,让大家在这方面少走弯路。

1:首先我们设置swfLoader的宽和高都设置成100%,已便后面缩放浏览器的时候让swfLoader容器的高宽大小跟着缩放。

2:设置swfLoader的属性maintainAspectRatio为false,这个属性的作用是让swfLoader加载内容不保持高宽比例,这样以便我们缩放,这个属性的默认值是保持加载内容的高宽比例。

3:设置swfLoader的属性scaleContent为true,这个属性的作用是缩放加载的内容来适应swfLoader控件,为falsh则反之。

这样设置不论你浏览器再怎么缩放大小,加载的swf都可以很好的自适应浏览器的大小。


Q:如何在popup子窗口中访问父窗口的画面变量
A:parentDocument

Q:居中显示
A:wjWindow.x = (FlexGlobals.topLevelApplication.width - wjWindow.width)/2;

Q:监听窗口变化
A:FlexGlobals.topLevelApplication.addEventListener(ResizeEvent.RESIZE,updateWindow);

Q:自适应代码
A:this.height=FlexGlobals.topLevelApplication.height;
this.width =FlexGlobals.topLevelApplication.width * 0.80;
//Application.application.addEventListener(ResizeEvent.RESIZE,resize);
this.horizontalScrollPolicy = "off";
this.verticalScrollPolicy = "off";



分享到:
评论

相关推荐

    采用flex方式的css页面自适应布局

    采用css的flex布局插入hightchart和Echart图表; 图表采用官方实例代码

    前端H5框架自适应模板

    本资源“前端H5框架自适应模板”显然是一个专注于移动设备优化的解决方案,特别适用于750px * 1334px的屏幕尺寸,这是iPhone 6/7/8系列的标准分辨率。模板基于font-size:20px的设计基准,这有助于确保在不同设备上...

    flex中dategrid自适应宽度实现

    flex中让dategrid里面的列宽根据内容自适应宽度的方法

    flex4自适应高度的TitleWindow

    这是一个flex4的项目,可以下载下来单独运行,项目中是一个自定义的TitleWindow,TitleWindow中存放了一个dataGrid,它可以根据dataGrid中数据行增加而改变自身高度,直至要最大高度。此组件使用mxml定义,重写了...

    flex3 textArea 高度自适应

    在标题“flex3 textArea 高度自适应”中提到的问题,就是如何实现这样一个功能,让`TextArea`的大小随着其内容的增加而自动调整。 在描述中提到,已经有一个自定义的解决方案,可以依据文本内容自动调整`TextArea`...

    自适应三列等高布局旧版flex.html

    自适应三列等高布局旧版flex.html

    div宽度自适应布局(左边自适应)

    在这种情况下,左侧的子元素可以通过设置较大的`flex-grow`值实现自适应宽度,而右侧子元素则可以设置固定宽度或较小的`flex-grow`值。 五、CSS Grid布局 CSS Grid布局是另一种强大的布局工具,特别适合创建复杂的...

    通过使用2个简单的方法让ReactNative视图自适应所有设备

    在React Native开发中,使应用视图自适应各种设备尺寸是一项关键任务,因为现代移动设备种类繁多,屏幕尺寸和分辨率差异大。本教程将详细介绍两种简单有效的方法,帮助开发者确保React Native应用在不同设备上呈现出...

    宽度自适应的按钮。button,方便实用

    `或`display: flex;`可以让按钮在一行内自适应排列。对于按钮的内容,可以使用`white-space: nowrap;`防止文字换行,保持按钮的一致性。 3. 响应式媒体查询: 利用媒体查询,可以针对不同屏幕尺寸设置不同的CSS...

    div宽度自适应布局(右边自适应)

    在网页设计中,"div宽度自适应布局(右边自适应)"是一种常见的网页布局技术,它主要涉及CSS(层叠样式表)的运用,使网页内容能够根据不同的屏幕尺寸和设备进行适配,尤其是针对响应式设计。在这个布局模式下,通常...

    Flex实现图片放大缩小

    Flex应用zoom实现图片的放大缩小,很简单的实例,可以给新手一些思路

    flex布局实现左侧文字溢出省略右侧文字自适应

    在网页布局设计中,有时我们需要实现一种效果,即左侧的文字能够根据内容自动调整宽度,并在空间不足时自动省略,而右侧的文字则需要保持自适应并全显,不会因为左侧文字过多而被挤压。这种效果通常可以利用CSS的...

    flex特效 不错的flex样式生成器

    Flex布局是一种强大的CSS布局模式,它允许开发者在不考虑元素的具体尺寸的情况下,创建灵活且响应式的用户界面。这个“flex特效 不错的flex样式生成器”是一个工具,可以帮助开发者更轻松地生成适用于Flex布局的CSS...

    button自适应高度和自动换行

    "button自适应高度和自动换行"这个主题主要关注如何让按钮在不同屏幕尺寸和内容长度下保持良好的视觉效果。以下是对这个主题的详细解释: 一、自适应高度 1. CSS Flexbox:使用Flexbox布局模型可以轻松实现按钮的...

    自适应宽度的标签导航

    在网页设计中,自适应宽度的标签导航是一种重要的布局技术,它允许导航栏根据浏览器窗口的大小自动调整其宽度,从而提供优秀的用户体验,特别是在不同设备和屏幕尺寸上。这种技术通常与响应式网页设计(Responsive ...

    IFRAME自适应

    将IFRAME放入一个具有`display: flex;`的容器,并设置`align-items: stretch;`,IFRAME将会占据剩余空间,实现高度自适应。 - **JavaScript**:通过JavaScript监听窗口的`resize`事件,动态计算IFRAME的内容高度,...

    html+css+个人博客自适应布局.zip

    让我们深入探讨一下这些技术及其在创建自适应博客布局中的应用。 HTML(超文本标记语言)是网页内容的结构框架,定义了页面上的各个元素,如标题、段落、图像和链接等。在自适应布局中,HTML通过使用`<meta>`标签的...

Global site tag (gtag.js) - Google Analytics