• 设计器UI控件
  • ECHARTS BI组件
  • 基础组件
  • 常见界面布局排布范例
  • 侧边栏目布局范例
  • 多内容组
  • 九宫格界面
  • 爱博体育下载界面主体框架布局
  • 滚动界面
  • 固定界面
  • 设计器框架控件
  • 爱博体育下载应用数据对接与交互(MVVM)
  • 传统开发模式
  • MVVM
  • MVVM技术框架
  • 表单与MVVM
  • 界面设计
  • 代码分析
  • 列表与MVVM
  • 界面设计
  • 代码分析
  • MVVM控制器
  • MVVM过滤器
  • 爱博体育下载应用与WEB
  • 组件化开发
  • 应用引擎
  • 应用引擎概述
  • uexWindow
  • uexWidget
  • uexWidgetOne
  • 腾讯X5内核引擎
  • 更新日志
  • 插件API
  • ·使用手册
  • ·ErrorCode
  • ·Constant
  • 系统功能
  • uexApplePay
  • uexBackground
  • uexBluetoothLE
  • uexCall
  • uexCamera
  • uexClipboard
  • uexContact
  • uexControl
  • uexDataBaseMgr
  • uexDevice
  • uexDocumentReader
  • uexEmail
  • uexFileMgr
  • uexFingerPrint
  • uexJsonXmlTrans
  • uexKeyChain
  • uexLocalNotification
  • uexLocation
  • uexLog
  • uexMMS
  • uexSensor
  • uexSMS
  • uexTouchID
  • uexZip
  • uex3DTouch
  • uexNFC
  • uexInAppPurchase
  • 功能扩展
  • uexAudio
  • uexCreditCardRec
  • uexGestureUnlock
  • uexImage
  • uexImageBrowser
  • uexPDFReader
  • uexScrawl
  • uexVideo
  • uexWebBrowser
  • uexImageFilter
  • 界面布局
  • uexActionSheet
  • uexAreaPickerView
  • uexBrokenLine
  • uexButton
  • uexCalendarView
  • uexChart
  • uexChatKeyboard
  • uexCoverFlow2
  • uexEditDialog
  • uexHexagonal
  • uexIndexBar
  • uexInputTextFieldView
  • uexListView
  • uexLoadingView
  • uexNBListView
  • uexPie
  • uexPieChart
  • uexPopoverMenu
  • uexScanner
  • uexScrollPicture
  • uexSearchBarView
  • uexSecurityKeyboard
  • uexSegmentControl
  • uexSlidePager
  • uexTabBarWithPopMenu
  • uexTimeMachine
  • uexWheel
  • uexWheelPickView
  • uexTabIndicatorView
  • uexWebView
  • 网络通讯
  • uexDataAnalysis
  • uexDownloaderMgr
  • uexMQTT
  • uexWebSocket
  • uexSocketMgr
  • uexUploaderMgr
  • uexXmlHttpMgr
  • 第三方SDK
  • uexALiBaiChuan
  • uexAliPay
  • uexBaiduMap
  • uexBaiduNavi
  • uexCamera360
  • uexEasemob
  • uexESurfingRtc
  • uexGaodeMap
  • uexGaodeNavi
  • uexGetui
  • uexJPush
  • uexMobSMS
  • uexNIM
  • uexQcloudAV
  • uexTencentLVB
  • uexQQ
  • uexQupai
  • uexRongCloud
  • uexSina
  • uexTent
  • uexUmeng
  • uexUnionPay
  • uexUnisound
  • uexWeiXin
  • uexXunfei
  • uexESurfingRtcLive
  • JSSDK开发
  • 概要
  • 基础类库Base
  • 本地存储LocStorage
  • 离线缓存icache
  • 窗口模块Window
  • 浮动窗口模块Frame
  • 数据库模块Database
  • 事件模块EventEmitter
  • 网络请求Request
  • 文件模块File
  • 设备模块Device
  • Button按钮
  • CheckBox按钮
  • Dialog消息对话框
  • Header导航栏
  • Input/Textarea文本输入
  • Listview列表组件
  • optionList带操作选项的列表组件
  • Radio按钮
  • Select下拉选择
  • Slider图片轮播组件
  • Switch开关组件
  • Tab选项卡组件
  • Treeview树状列表组件
  • widgetOne模块
  • widget模块
  • 更新日志
  • UI基础框架
  • 爱博体育下载-LOVEBET爱博体育官网
  • base
  • box
  • color
  • 开发工具IDE
  • IDE概述
  • 安装下载
  • 启动
  • 新建项目
  • 同步项目
  • UI设计器的使用
  • 实时预览
  • 插入控件
  • 本地打包
  • 本地模拟调试
  • 真机同步调试
  • 自定义插件管理
  • 插件同步
  • 代码加密
  • 多入口开发
  • 动态库升级
  • GIT托管
  • 更新日志
  • 开发指导
  • 平台服务专题
  • 应用开发
  • 应用管理
  • 插件引擎
  • 应用转移
  • App升级
  • 开源&原生能力开发专题
  • 自定义引擎机制说明
  • Widget插件扩展机制
  • AndroidNative插件扩展机制
  • iOSNative插件开发指南
  • 自定义插件发布
  • 原生布局实现讲解
  • 自定义布局指引文档
  • 今日头条案例文档
  • 苹果开发适配专题
  • ATS说明文档
  • iOS10适配指南
  • 推送技术专题
  • config·xml配置说明
  • iOS证书申请流程
  • iOS应用正式发布AppStore流程
  • •获取签名信息工具使用
  • •使用Chrome调试AppCan应用
  • •手机抓包工具流程
  • 开放服务
  • 第三方API
  • 云加密服务
  • 云测试服务
  • 第三方云实时通讯天翼RTC
  • 第三方广告接入服务
  • 第三方语音服务
  • Wilddog(JavaScriptSDK)接入
  • 官方推送API•服务端集成
  • 按照softToken列表推送
  • 按照userId列表推送
  • 按照appId广播推送
  • 常见问题分类
  • 云打包常见问题
  • 应用开发常见问题
  • 插件开发常见问题
  • IDE常见问题
  • MVVM常见问题
  • 如何查看分析失败日志
  • 打包失败原因剖析
  • 企业版常见问题
  • App版本更新问题排查指南(对接EMM/MMS平台)
  • 如何查看app上架被拒
  • 正益工作
  • 正益工作概述
  • App端使用手册
  • PC端OA使用手册
  • PC端CRM使用手册
  • 管理后台使用手册
  • 正益工作开源文档
  • 子应用接入文档
  • OA模块代码说明
  • 爱博体育下载CRM模块代码说明
  • 工作管理模块代码说明
  • 案例详解
  • 支付插件实例
  • 页面UI
  • 支付功能
  • 海外购案例
  • 引导页
  • 首页
  • 查询页
  • 发布页
  • 淘现场详情页
  • 商品详情页
  • 购物车功能
  • 我的详情页面
  • 其他篇
  • 文档中心更新日志
  • 公测列表汇总
  • 公测-configxml配置插件以及iOS支持swift
  • iOS9开发适配指南打包环境Xcode7升级公测
  • iOS10公测技术说明
  • 3.3公测内容
  • 4.0接口变化说明
  • 爱博体育下载-LOVEBET爱博体育官网

  • 概述
  • 1、弹性盒子模型还提供了其他几个强大的属性
  • 2、基石 (UI的分辨率适配)
  • 概述

    弹性盒子模型是CSS推出的一种布局机制。这种机制与常见的流式布局有很大区别。简单的理解为,流式布局是通过内容决定父容器大小,弹性盒子模型是,在指定大小的父容器里来为子元素分配空间,简单的流式布局例子。

    效果:

    示例:

    <div style='display:inline;border:1px solid blue'>
    <div style='display:inline;background:#E00'>aaaa </div>
    <div style='display:inline;background:#0E0'>bbbb </div>
    </div>
    

    上述代码中是一个简单的流式布局范例,第1行的div的宽度,是由第2和第3行的div宽度相加来决定的。即如果第2行或第3行的div宽度变化,第1行的宽度也会随之变化。 我们调整一下代码,使用弹性盒子模型来布局。

    效果:

    示例:

    <div style='display:-webkit-box;width:200px;border:1px solid blue'>
    <div style='-webkit-box-flex:1;background:#E00'>aaaa </div>
    <div style='background:#0E0'>bbbb </div>
    </div>
    

    上 述代码中,指定第1行的div使用BOX方式布局子元素。并指定这个div宽200px。第3行的div的宽度由内容撑开,可以认为是一个指定宽度的 div,通过模拟器可以看到宽32px。第2行指定这个div为弹性,占用1份空间,就代表这个div的宽度是总宽度200px-32px=168px。 如果我们改动第1行的div宽度为320px,那么第2行div的宽度就是 320px-32px=288px。这个机制对于适配各种分辨率的屏幕无疑是一把利器。 我们再调整一下代码。

    效果:

    示例:

    <div style='display:-webkit-box;width:200px;border:1px solid blue'>
    <div style='-webkit-box-flex:1;background:#E00'>aaaa </div>
    <div style='-webkit-box-flex:2;background:#0EE'>bbbb </div>
    <div style='background:#0E0'>cccc </div>
    </div>
    

    我们加入了一个占用2份空间的div。这个时候这两个弹性DIV到底如何分配空间呢?按照规则来说,第2行应该占用168px/3=56px,第3行占用 112px,但实际上宽度并不是如此, 通过模拟器可以看到,第34行占用66px,第35行占用102px。这是由于当弹性DIV中有内容时,引擎会自动进行调整。那么如何在有内容的情况下还 能够保持1:2的比率呢? 我们再调整一下代码。

    效果:

    示例:

    <div style='display:-webkit-box;width:200px;border:1px solid blue'>
    <div style='-webkit-box-flex:1;background:#E00;position:relative'>
    <div style='position:absolute;width:100%;height:100%;'>aaaa </div>
    </div>
    <div style='-webkit-box-flex:2;background:#0EE;position:relative'>
    <div style='position:absolute;width:100%;height:100%;'>bbbb </div>
    </div>
    <div style='background:#0E0'>cccc </div>
    </div>
    

    这次修改中,我们把内容'aaaa'通过一个使用绝对定位的div进行包含,这时通过模拟器去看会发现,两个弹性div按照1:2的比率自动分配了空间。 上面我们使用弹性盒子布局时元素都是横向排序的,那么怎么才能让元素纵向排布呢。我们接着调整一下代码。

    效果:

    示例:

    <div style='display:-webkit-box;height:200px;border:1px solid blue;-webkit-box-orient:vertical;'>
    <div style='-webkit-box-flex:1;background:#E00;position:relative'>
    <div style='position:absolute;width:100%;height:100%;'>aaaa </div>
    </div>
    <div style='-webkit-box-flex:2;background:#0EE;position:relative'>
    <div style='position:absolute;width:100%;height:100%;'>bbbb </div>
    </div>
    <div style='background:#0E0'>cccc </div>
    </div>
    

    上述代码中,我们在第1行的div中指定了高度为200px,使用-webkit-box-orient:vertical来控制子元素为纵向排列。弹性盒子模型还提供了其他几个强大的属性。

    1、弹性盒子模型还提供了其他几个强大的属性

    -webkit-box-direction:reverse; 通过在父DIV中设定这个属性可以让子元素反向排列。如下图:

    使用前子元素按照1 2 3 的顺序进行排列显示,当在父DIV中使用此属性时,自动把子元素倒序排列。这个时候,我们并没有真的重新按照3 2 1顺序排布子元素。

    -webkit-box-align:center;

    通过在父元素中设定这个属性,当子元素横向排布时,可以使子元素间实现上边界对齐、中线对齐和下边界对齐的效果。

    如果是纵向排列时,那么可以实现子元素左边界对齐、中线对齐和右边界对齐。

    -webkit-box-pack:center;

    通过在父元素中设定这个属性,当子元素横向排布时,可以使子元素间左边界对齐、中线对齐和右边界对齐。

    如果是纵向排列时,那么可以实现子元素间上边界对齐、中线对齐和下边界对齐的效果。

    如果父元素中只包含一个子元素,混合使用-webkit-box-align和 -webkit-box-pack可以使子元素实现居左上、居中上、局右上等9个方位的定位。

    弹性BOX架构可以同时兼容流式布局,即当所有子元素都没有设定弹性份数时,父元素可以被子元素自动撑开。如下代码

    效果:

    示例:

    <div style='display:-webkit-box;border:1px solid blue;-webkit-box-orient:vertical;'>
    <div>aaaa </div>
    <div>bbbb </div>
    <div>cccc </div>
    </div>
    

    在上述代码中所有子元素都未使用box-flex定义弹动属性,容器div也未设定高度,此时,容器div的高度为三个子元素的高度和,并且随着子元素的高度变化而变化。

    在AppCan UI架构中,我们把上面遇到的情况进行了CSS类封装

    ub 元素采用弹性BOX布局

    ub-rev 子元素反序排列

    ub-con 在子元素中加入一个容器,用于避免内容引起子元素大小变化

    对应CSS代码为position:absolute;width:100%;height:100%;

    ub-ac、ub-ae 子元素垂直居中对齐和尾对齐

    ub-pc、ub-pe、ub-pj 子元素水平居中对齐、尾对齐和两端对齐

    ub-ver 子元素纵向排列

    ub-f1 ub-f2 ub-f3 ub-f4 子元素占用区域份数

    通过上述类,我们可以完成各种各样的排版布局,极大地降低学习难度和元素排版复杂度,使代码更加简练。

    2、基石 (UI的分辨率适配)

    每 一个手机应用,如果需要在众多的爱博体育下载终端上保持一致的效果,UI适配是工作的重中之重。设计原理是为不同分辨率的系统,选取最贴近于人直观感受舒适度的一 个字体大小作为参考量。例如在320x480分辨率的手机上,采用16px大小字体作为参考量。在480x800分辨率的终端上,采用24px大小字体作 为参考量。一切元素的大小都是以参考量的相对比值来定义。在CSS里面对应的是em。那么在320x480分辨率下 1em=16px,在480x800分辨率下1em=24px。

    通过这种方式,我们可以保证,同样代码的界面,在不同分辨率下都能够保持最贴近用户的交互效果。

    UI 中,我们在中间件中为不同屏幕密度(单位尺寸中可显示的点数),默认定义好了字体,开发者不再需要在代码中引入ui-media.css文件,即使有新的 分辨率手机问世,也会自动适配。目前参照Andorid屏幕密度划分为低密度、普通密度、高密度、超高密度、超超高密度,分别定义字体为14px 16px 24px 32px 48px。


    以上信息是否解决您的问题?

    免费注册,快速体验

    还需要帮助吗? 联系我们
    最新更新 12th Oct 2019