`
其实不坏
  • 浏览: 52285 次
  • 性别: 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布局做出自适应页面(语法和案例)

    Flex布局简介 Flex英文为flexiable box,翻译为弹性盒子,Flex布局即弹性布局。 Flex布局为盒子模型提供了很大的灵活性,任何一个容器都可以指定为Flex布局,设置方法为: .box{ display: flex; } 行内元素使用...

    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应用在不同设备上呈现出...

    Flex datagrid 自动设置列宽

    在Flex开发中,数据网格(DataGrid)是一个常用的组件,用于展示结构化的数据。然而,Flex DataGrid默认并不提供直接设置列宽的功能,这可能会给开发者带来一些困扰,特别是当数据显示的需求较为复杂时。不过,有...

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

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

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

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

    Flex实现图片放大缩小

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

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

    主要介绍了flex布局实现左侧文字溢出省略右侧文字自适应的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    flex 经常用法flex 经常用法

    Flex布局,全称为“Flexible ...总的来说,Flex布局提供了强大的灵活性,使得在Web开发中创建响应式、动态和可自适应的用户界面变得更加容易。理解和熟练运用这些常用方法,对于提升网页和应用程序的用户体验至关重要。

    自适应滤波器论文

    在数字信号处理中 ,滤波器是一个重要的单元 。 自适应滤波器的参数可以调整以满足被控制对象的 未知和时变的要求 ,因此 ,在未知统计量环境中进行 ...选用 ALTERA 公司的 FLEX10K30 器件 ,用 MaxplusII 进行了仿真验证

    flex 映射DataGrid,修改DataGridColumn显示值

    如何改变Flex中DataGrid某一DataGridColumn显示内容的字体颜色

    IFRAME自适应

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

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

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

    三列自适应屏幕

    在这个场景下,我们可以用它创建一个容器,设置其`display: flex`属性,然后让其子元素(即三列)在容器内部自适应分布。通过`flex-grow`、`flex-shrink`和`flex-basis`属性,可以控制各列的扩展、收缩和基础大小,...

Global site tag (gtag.js) - Google Analytics