探索移动web端开发的奥妙

如果你是刚开始接触移动web开发的前端工程师，那你也许会遇到很多我曾经遇到过的问题，也许有很多名词和概念，你经常看到或听说，今天就让我们来探索移动web端开发的奥妙。

首先，我们要区分三点概念：

移动web开发跟web前端开发差别不大，因为主要开发对象是IOS和Android系统的手持设备，所以不需要再去兼容IE和一些2B浏览器的兼容性，在这里是webkit的天下，可以理解成是pc网页的缩小版加了一些触摸特性，当然不同版本的Android还有不同浏览器还是存在一定的差别的。看看《网站建设前端开发包括那些项目?》这篇文章或许对你有用。

web app开发特指的是用HTML5开发，因为他很接近客户端应用程序的用户体验，可以和系统深度融合，调用一些只有客户端才能调用的功能。(比如访问电话、摄像头等本地功能)

而native app就是特指的开发Android的Java和开发iOS的Objective-C。

综合而言，移动web开发利用的是基于浏览器的网页语言技术，native app开发利用的是基于操作系统的程序语言技术，web app介于两者之间.当然现在比较流行混合型app。

1、首先是您可能已经听过的响应式布局，其实响应式web设计并非新的技术，只是将弹性布局、弹性图片和媒体查询等已有的开发技巧整合在了一起，其中媒体查询，link标签的media属性到如今的css3又逐渐的更加丰富，下面列了一部分供大家参考(参考自http://www.w3.org/html/ig/zh/wiki/CSS3媒体查询)。已经丰富的页面Meta，其中定义了IOS允许全屏、顶端状态条样式、禁止判断为电话号码保存到桌面图标，以及允许缩放比例等丰富的属性。另外在样式中的应用，我们可以基本舍弃ldpi了。

/*中分辨率屏幕*/

@media(-webkit-min-device-pixel-ratio:1){css代码}

/*高分辨率屏幕*/

@media(-webkit-min-device-pixel-ratio:1.5){css代码}

/*超高分辨率屏幕(传说中的Retina屏)*/

@media(-webkit-min-device-pixel-ratio:2){css代码}

上面就是在css中的用法，把我们需要的css代码包含在大括号中就能用了，是不是很方便的样子。当然我们还可以用到几个特性，如下：

@media screen and (max-width:768){css代码}

针对视口宽度不大于768像素的情况加载大括号中的样式。

2、百分百布局，当我们拿到设计师的设计稿之后(一般为640或720)，按照设计稿的2/1或者3/1来百分比布局即可，此时便会用到css3的box-sizing等最新属性，其中display:-webkit-box、渐变、阴影、2D3D等更是简单粗暴，如果你没用过，相信你会很快爱上它，甚至于ico我们也可以使用字体图标，因为大多数手机浏览器是都支持HTML5和CSS3的。

3、字级单位，如果你还只知道用px、em那你out了，用下rem吧，我们之前用em、百分比的时候，经常因为嵌套的层级太多而难以把控，而用px则被固定死了，现在我们用rem完全不用担心这个问题，因为rem的参照对象只有根节点。我们只需设置根节点的大小，所有子节点都只需参照它来设计就可以。

4、新增的标签和选择符，HTML5新增标签让我们的结构更加语义化，而新的伪类选择符和伪对象选择符，可以让你减少很多不必要的代码，这里就不细说了。

5、关于PPI/DPI的了解，我们计算PPI就是为了知道一部手机设备是属于哪个密度区间的，因为不同的密度区间，对应着不同的默认缩放比例，这是一个很重要的概念。这里我们就会用到viewport。

文章名称：探索移动web端开发的奥妙
分享路径：https://www.cdcxhl.com/news/220992.html

成都网站建设公司_创新互联，为您提供网站设计公司、全网营销推广、App开发、电子商务、软件开发、网站制作

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联