移动应用开发之自适应布局与单位（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中废弃的方法多了去了，有的方法还不是照样使用

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

标签：

原文地址：http://www.cnblogs.com/xl-xlg/p/5029254.html