探索移动web端开发的奥妙

2022-12-09    分类: 网站建设

如果你是刚开始接触移动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端开发的奥妙
URL网址:https://www.cdcxhl.com/news42/220992.html

成都网站建设公司_创新互联,为您提供品牌网站建设定制网站网站导航云服务器网站收录营销型网站建设

广告

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

小程序开发