移动应用开发之自适应布局与单位(px、em)选择

  • 移动应用开发中自适应布局是非常重要的,因为不同设备分辨率不一样,大小也不一样,不采用自适应布局在不同的设备中显示会出现各种问题
  • 能够起到自适应布局的方法
    • CSS3中的自适应布局

      • 百分比布局法:即大小,位置,边距等用百分比来限制,能够在不同的设备中占据总体的布局一致
      • webkit-box结合-webkit-box-flex布局法:使用webkit-box能够实现弹性盒子模式布局,结合-webkit-box-flex能够实现将屏幕完全分割的布局,与半分比不同的是:百分比布局在存在border的时候不好控制,因为如果总体是100%,再加上border就会超过总体值,当然也可以在使用百分比的基础上加上box-sizing:border-box将border设置为占用内部空间来解决这个问题,但是现在主流的布局还是使用webkit-box
      • 媒体查询布局法:@media screen and (max-width:400px),采用媒体查询法定义不同型号设备使用的样式,给每种尺寸的设备分别定义样式,这种方法有一定的作用,但是在Android设备越发混乱的市场状况下,设备尺寸越来越繁杂,不适合整体靠媒体查询来实现自适应布局
    • JS中动态实现自适应布局
      • 通过JS获取屏幕大小,经过计算动态创建布局,这种方式太复杂,而且在移动端影响体验,基本被抛弃
      • 监听resize事件与oritationchange事件实现在设备状态发生改变时对应布局的改变
  • Android中的自适应机制

    Android中通常采用dp与sp为单位进行布局,因为采用这两个单位会根据设备分辨率进行自动缩放,默认将设备宽度都定义为360dp

  • Hybrid App开发工具中的布局
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    • 首先需要viewport支持,这种设置方式在Appcan、HBuilder、apicloud中都支持,针对此种设计方法有哪些自适应布局方法?

      • 页面在webview中的显示原理:页面在webview中的真实大小一般是360,然后将其拉升到响应的分辨率,因此html在webview中的线条是那么的粗,看上去就明显不是1px,那是因为最终显示是经过放大后的,并不是一个物理像素,通常是1.5或者2个物理像素,因此整个界面看上去是那么的粗,不够精致,图片也是放大后的,可能会出现模糊现象
      • 这种布局特点:
        • px:不同尺寸不同分辨率中px同样px值大小是一样的,即是固定大小
        • em:根据字体设置大小来显示,对于不同分辨率的设备来说是不一样大的,即是可缩放大小吗,与dp和sp类似,建议不居中采用该单位进行布局
    • 精细化布局方式
      • 首先研究原理,在Android中1px并不是1物理像素,而是经过放大后的,但是在IOS中却是真实的1物理像素,这样使得应用在IOS中看上去效果要好的多,这是为什么?

        • IOS中的UIWebview会识别html5中viewport中的width属性,根据width属性来改变设备的分辨率与物理像素比例
        • Android中相对的属性是target-densitydpi,但是在Android4.4以后就废弃了这个属性,也就是说使用4.4以后的Android SDK 打包就不能支持该属性
    • 在apicloud中,编译环境采用的是4.4以上的Android SDK,即不支持target-densitydpi属性,不能够使整个应用精细化,很多人想方设法实现1px线条,通过:after或:before来添加一个1px的div,然后对div进行缩放,实现真实1px线条,但是这样做太繁琐,而且解决不了圆角的问题,其他地方都变成1px了,按钮却还是粗border,这样更加影响体验
    • HBuilder在最初采用的是API20环境打包的,也不支持该属性,但是最近改成了API19,实现了对于该属性的支持,可见虽然Android官方废除了,但是其作用仍然很大
    • Appcan一直以来都是使用的4.4以下的Android SDK环境打包的,因此一直支持该属性,有人曾经说过Appcan用的是Android2.3的引擎,apicloud用的是4.4以后的引擎,因此apicloud比Appcan速度更加快,这些只是那些不懂的人才会说的,现如今Appcan的速度却等同于甚至高于apicloud怎么解释?看我发的测试随笔就知道
  • 建议:

    • 使用HBuilder与Appcan的开发人员页面中一定要加上
    • <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

      来显示精致化界面,在布局中采用em来布局,因为这样设置后px在不同分辨率下得到的效果是不一样的

    • 在apicloud中布局使用px与em在不同设备上真实差距不是很大
    • 也希望apicloud能够适配target-densitydpi属性的支持,而不要像论坛版主问他为什么放弃使用该属性,就说Android不支持了,HTML5定稿中废弃了该属性,说我钻牛角尖,既然别人能用,你为什么不能用,废弃并不代表不可以用,Android中废弃的方法多了去了,有的方法还不是照样使用
时间: 2024-10-25 18:49:31

移动应用开发之自适应布局与单位(px、em)选择的相关文章

详细讲解css单位px,em和rem的含义以及它们之间的区别

一.首先介绍一下px px就是css中最基本的长度单位了,用px做单位基本上没什么问题,可以做到让页面按套路精确的展现! 可但是!但可是!如果全篇用px布局会暗藏一个蛋疼的问题,就是当用户和Ctrl滚页面的时候(说白了就是ctrl+,ctrl-),你会发现页面结构产生了不可预知的错乱,因此有砖家倡导使用em替代px..... 二.接下来介绍一下em 如果你从上到下阅读此文,你应该已经知道了em出现的原因,下面说说em的特性,简单的讲px是绝对单位,1px就是1px,2px就是2px,以此类推,而

搞清css的单位 px,em,rem的区别

前言:现在上大街一眼望去,基本上90%的人都拿着手机,走路,逛街,吃东西都不停着,所以对于我们这种前端开发的程序猿来说,让网页适应于移动端可以说是必须要满足的.所以最近也是一直在学习和实践.然后就接触到rem这个单位,不妨就彻底弄明白这几个单位之间的区别吧. PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是有很大比例的中国网民使用IE浏览器(或内核). p

css的单位 px em rem fr

px :px是像素,是相对长度单位,是相对于显示器屏幕分辨率而言的. px的特性是属于绝对数值,它不受外围单位影响. em :em是相对的数值单位,它会受到外围的文字大小所影响,而1em即是1倍的文字大小,1.5em也就是1.5倍的文字大小.它的单位长度是根据元素的文本垂直长度来决定的,可以作用在width.height.lineheight.margin.padding.border等样式的设置上. rem :rem是相对单位,是于HTML根元素,直白点就是相对于html元素字体大小的单位 优

css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况

px:绝对单位,页面按精确像素展示 em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值. rem:相对单位,可理解为"root em", 相对根节点html的字体大小来计算,CSS3新加属性,chrome/firefox/IE9+支持. (另外需注意chrome强制最小字体为12号,即使设置成 10px 最终都会显示成 12px,当把html的font-size设置成10px,子节点rem

css的大小单位px,em,rem区别

PX px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的.使用px可以准确的定位网页元素,但是,不同显示器网页的显示效果可能会有差异,比较难兼容. EM EM就是根据基准来缩放字体的大小.EM实质是一个相对值,而非具体的数值.em是相对于父元素的属性而计算的,假如父元素的font-size是16px,2em=2*16px=32px. REM REM也是一个相对值,不过REM是相对html根元素的font-size而计算的. 一般浏览器的默认字体大小是16px,单位间的换

css大小单位px em rem的转换和详解

PX特点1. IE无法调整那些使用px作为单位的字体大小:2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位:3. Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核). px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的.(引自CSS2.0手册) em是相对长度单位.相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸.(引自CSS2.0手册) 任意浏览器的默认

我熟知的三种三栏网页宽度自适应布局方法

一.前言在如今各个分辨率显示器N足鼎立的时期,页面采用流动性布局(亦可称自适应布局)不失为一个好选择.当然,具体实现不是那么容易,需要一定的css功力和实践经验.本文不讲细节,只讲外部的自适应架构,这也是实现整个页面自适应的前提.目前为止,我所熟知的左中右三栏宽度自适应于浏览器的方法有三个:绝对定位法,margin负值法以及自身浮动法.这些方法简洁实用,且无兼容性问题.如果您想在您的页面上使用流动性布局,相信本文给您一些启示的. 二.三种方法为了演示的需要,首先限定下示例的布局结构:左中右三栏布

关于使用rem单位,calc()进行自适应布局

关于css中的单位 大家都知道在css中的单位,一般都包括有px,%,em等单位,另外css3新增加一个单位rem. 其中px,%等单位平时在传统布局当中使用的比较频繁,大家也比较熟悉,不过px单位在进行自适应布局的过程当中则会有些力不从心,大部分的解决方案是使用%为单位配合@media媒介查询来进行自适应布局.不过还有另外一个css3新添加的单位也同样可以拿来进行自适应布局,在我看来这种方法也更加方便直观. em和rem 首先先介绍一下em,这个单位是根据其父元素的字体大小来进行计算的,即1e

微信小程序新单位rpx与自适应布局

rpx是微信小程序新推出的一个单位,按官方的定义,rpx可以根据屏幕宽度进行自适应,在rpx出现之前,web页面的自适应布局已经有了多种解决方案,为什么微信还捣鼓出新的rpx单位?在解释这个单位前,我们先简单了解一下目前的主流的自适应布局解决方案: 响应式(Responsive web design) rem 流式布局 scale伸缩布局 响应式 响应式布局的问题在于需要维护多个样式文件,维护成本太大,一般的移动H5页面都不会优先考虑. rem rem是近几年比较流行的方案,淘宝移动web端就是