本身接触移动端开发是在2012年,那时候比较新潮的是制做WEB APP。什么是WEB APP呢?所谓的WEB APP就是用网页模拟出原生语言(如iOS)开发的APP交互效果。虽然在表现层面上,HTML5表现突出,但不得不认可的是,在系统性能层面,WEB APP明显要差于原生应用(即Native APP)。这也就使得WEB APP这条路暂时性的被堵住了。html
因而,移动端的开发方向逐渐向移动端网页倾斜。对于PC端,咱们一直使用的是px(像素)进行代码的书写,可是到了移动端,须要面临不一样的分辨率。在2012年的时候,本身和团队成员在写移动端的时候,因为是初次接触,仍是在使用px(像素)做为单位。由于在2012年的时候,绝大多数的手机的屏幕大小都是320*480分辨率,因此,即使是使用像素做为单位进行移动端网页开发也是彻底能够的。浏览器
关于视口的知识,可点击查看——移动端H5知识-视口viewport框架
随着移动端的继续发展,在2012年9月,iPhone5上市,开始引领“特殊分辨率”的发展,因而,320*480分辨率的手机屏幕在整个手机市场当中占有的份额愈来愈少,各类各样的分辨率如雨后春笋般冒了出来。布局
此时咱们再进行固定像素进行开发明显是不明智的。因而,咱们开始采用百分比(相对度量单位)进行盒模型横向属性(width、左右内边距、左右外边距)的制做,使用em(相对度量单位)实现文字的处理。但盒模型纵向上仍是使用固定像素做为单位。性能
可是,这种操做致使了一个问题——主要表如今img标签的处理上。对于图片来讲,只须要设置横向百分比,纵向会自动等比例缩放。在列表页以及内容页还好,毕竟内容是自动撑开父级高度的;可是在首页或者二级页,但凡涉及到父级元素高度固定的盒模型,里面的img就会出现变形(压缩或者拉伸)的问题。学习
这个问题也是困扰了本身许久,可是一直没有找到一个很是好的解决办法。测试
当本身还在纠结img的处理时,2013年,在北京流行起了一种新的技术——响应式布局。经过媒体查询,针对不一样大小分辨率的设备,设置不一样的样式。应该说,对移动端页面的开发帮助不大,缘由在于,响应式的出现主要是由于咱们但愿一段代码可以同时适配PC端、平板电脑以及手机。因为三种平台的样式以及用户体验应该是迥然不一样的,那么此时,咱们就须要有“断点”,在不一样位置,有不一样的样式,而在两个“断点”之间的样式,则使用相对单位作“渐变性的过渡”。字体
应该说,响应式布局解决了典型的屏幕像素不一样样式的问题,可是却依旧搞定不了以前的那个问题。flex
关于CSS3媒体查询的知识,可点击查看——移动端H5知识-CSS3媒体查询优化
在横向百分比,纵向像素值的方法无效时,本身可以想到的就是纵向也设置为百分比了,可是却发现,盒模型属性在纵向上的一些设置上是存在问题的,如padding-top/bottom、margin-top/bottom等。而文本属性中line-height在设置百分比时也并非按照当前元素高度计算的。
因而,横纵向均设置为百分比的方法就破灭了~
关于盒模型的一些问题以及背景的合理使用,可点击查看——移动端H5知识-百变盒模型以及移动端H5知识-背景的妙用
随着HTML5的发展,除了原来的em单位,又新增了rem单位。这两个单位都是相对单位。1em表示的是当前元素一个字体大小的尺寸;而1rem,也表示的是一个字体大小的尺寸,可是是针对html标签进行计算的。相比之下,rem的计算起来要简单不少。因而,本身尝试用rem解决横向以及纵向的设置,舍弃掉了百分比,发现仍是挺不错的,算是兼容了绝大多数机型和浏览器。以后,在使用一款华为手机进行测试的时候,发现并不支持横向的rem。因而,又须要想办法啦~~~
针对华为手机,我尝试了横向百分比,发现仍是可以支持的,因而就折中了一下,横向使用百分比进行控制,纵向使用rem做为单位。此时可以实现全部浏览器的兼容。
在横向使用百分比,纵向使用rem时,会因为计算产生必定的偏差,因而,运用学习过的一些HTML5技术,进行移动端页面的优化,例如,使用CSS3的盒阴影替换掉边框。而对于rem,在计算中一般是存在必定的字体偏差的(会计算出小数点),此时正好接触了一下淘宝的移动端页面,看到了一个不错的JS框架——flexible.js,经过这个框架对页面进行处理,可以防止小数点的出现。
关于flexible.js框架的具体用法,可点击查看——移动端H5知识-处理rem小数点 flexible.js
上个月月初,发现网易移动端的制做方法有些特殊,查看代码时发现,网易采用了固定像素进行书写,而经过MetaHandler.js进行了页面的控制。最近尝试了一下,感受仍是挺不错的,兼容也是比较好的,不失为一种好方法。
关于MetaHandler.js框架的具体用法,可点击查看——移动端H5知识-固定像素的实现方法