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