关闭

如何进行移动端的页面开发?

标签: 移动端开发前端flexiblerem
1450人阅读 评论(0) 收藏 举报
分类:

如何进行移动端的页面开发

应该说,移动端的开发是伴随着HTML5的兴起而出现的,2007年第一款iPhone诞生,2009年HTML5这个名词第一次登上“舞台”。当时的移动互联网开始逐渐兴起,发展到今,移动互联网已经和人们的日常生活密切相关。作为开发者,对于一个崭新的事物,一直在尝试的“路上”,到底最好的开发方式是什么?本文介绍了从移动端诞生到现在,自己探索到的开发方法,并配以相应知识点,欢迎跟大家沟通、分享。

初次接触移动端,绝对单位的使用

自己接触移动端开发是在2012年,那时候比较新潮的是制作WEB APP。什么是WEB APP呢?所谓的WEB APP就是用网页模拟出原生语言(如iOS)开发的APP交互效果。虽然在表现层面上,HTML5表现突出,但不得不承认的是,在系统性能层面,WEB APP明显要差于原生应用(即Native APP)。这也就使得WEB APP这条路暂时性的被堵住了。

于是,移动端的开发方向逐渐向移动端网页倾斜。对于PC端,我们一直使用的是px(像素)进行代码的书写,但是到了移动端,需要面临不同的分辨率。在2012年的时候,自己和团队成员在写移动端的时候,由于是初次接触,还是在使用px(像素)作为单位。因为在2012年的时候,绝大多数的手机的屏幕大小都是320*480分辨率,所以,即便是使用像素作为单位进行移动端网页开发也是完全可以的。

关于视口的知识,可点击查看——移动端H5知识-视口viewport

横向百分比,纵向像素值

随着移动端的继续发展,在2012年9月,iPhone5上市,开始引领“特殊分辨率”的发展,于是,320*480分辨率的手机屏幕在整个手机市场当中占有的份额越来越少,各种各样的分辨率如雨后春笋般冒了出来。

此时我们再进行固定像素进行开发明显是不明智的。于是,我们开始采用百分比(相对度量单位)进行盒模型横向属性(width、左右内边距、左右外边距)的制作,使用em(相对度量单位)实现文字的处理。但盒模型纵向上还是使用固定像素作为单位。

但是,这种操作导致了一个问题——主要表现在img标签的处理上。对于图片来说,只需要设置横向百分比,纵向会自动等比例缩放。在列表页以及内容页还好,毕竟内容是自动撑开父级高度的;但是在首页或者二级页,但凡涉及到父级元素高度固定的盒模型,里面的img就会出现变形(压缩或者拉伸)的问题。

这个问题也是困扰了自己许久,但是一直没有找到一个非常好的解决办法。

响应式布局

当自己还在纠结img的处理时,2013年,在北京流行起了一种新的技术——响应式布局。通过媒体查询,针对不同大小分辨率的设备,设置不同的样式。应该说,对移动端页面的开发帮助不大,原因在于,响应式的出现主要是因为我们希望一段代码能够同时适配PC端、平板电脑以及手机。由于三种平台的样式以及用户体验应该是迥然不同的,那么此时,我们就需要有“断点”,在不同位置,有不同的样式,而在两个“断点”之间的样式,则使用相对单位做“渐变性的过渡”。

应该说,响应式布局解决了典型的屏幕像素不同样式的问题,但是却依旧搞定不了之前的那个问题。

关于CSS3媒体查询的知识,可点击查看——移动端H5知识-CSS3媒体查询

横向纵向均百分比

在横向百分比,纵向像素值的方法无效时,自己能够想到的就是纵向也设置为百分比了,但是却发现,盒模型属性在纵向上的一些设置上是存在问题的,如padding-top/bottom、margin-top/bottom等。而文本属性中line-height在设置百分比时也并不是按照当前元素高度计算的。

于是,横纵向均设置为百分比的方法就破灭了~

关于盒模型的一些问题以及背景的合理使用,可点击查看——移动端H5知识-百变盒模型以及移动端H5知识-背景的妙用

横向纵向rem

随着HTML5的发展,除了原来的em单位,又新增了rem单位。这两个单位都是相对单位。1em表示的是当前元素一个字体大小的尺寸;而1rem,也表示的是一个字体大小的尺寸,但是是针对html标签进行计算的。相比之下,rem的计算起来要简单很多。于是,自己尝试用rem解决横向以及纵向的设置,舍弃掉了百分比,发现还是挺不错的,算是兼容了绝大多数机型和浏览器。之后,在使用一款华为手机进行测试的时候,发现并不支持横向的rem。于是,又需要想办法啦~~~

正解 —— 横向百分比,纵向rem

针对华为手机,我尝试了横向百分比,发现还是能够支持的,于是就折中了一下,横向使用百分比进行控制,纵向使用rem作为单位。此时能够实现所有浏览器的兼容。

优化正解 —— 横向百分比,纵向rem

在横向使用百分比,纵向使用rem时,会由于计算产生一定的误差,于是,运用学习过的一些HTML5技术,进行移动端页面的优化,例如,使用CSS3的盒阴影替换掉边框。而对于rem,在计算中通常是存在一定的字体误差的(会计算出小数点),此时正好接触了一下淘宝的移动端页面,看到了一个不错的JS框架——flexible.js,通过这个框架对页面进行处理,能够防止小数点的出现。

关于flexible.js框架的具体用法,可点击查看——移动端H5知识-处理rem小数点 flexible.js

优化正解2 —— 任性的使用固定像素来实现

上个月月初,发现网易移动端的制作方法有些特殊,查看代码时发现,网易采用了固定像素进行书写,而通过MetaHandler.js进行了页面的控制。最近尝试了一下,感觉还是挺不错的,兼容也是比较好的,不失为一种好方法。

关于MetaHandler.js框架的具体用法,可点击查看——移动端H5知识-固定像素的实现方法

0
0
查看评论

浅谈前端移动端页面开发(布局篇)

前言的一些碎碎念:最近一直在写移动端的页面,不过一直是用的别人造好的轮子,很多时候并没有想那是为什么,那是怎么样要那么写,就跟着别人的文档去了。本以为自己对移动端的那一丢丢理解,结果很多东西都特么有问题,所以,今天停下了手中的一些东西,来谈下移动端的布局方案吧 内容有些长,这也是我第一次写博客...
  • u010852544
  • u010852544
  • 2016-12-09 14:17
  • 2296

如何进行移动端的页面开发

应该说,移动端的开发是伴随着HTML5的兴起而出现的,2007年第一款iPhone诞生,2009年HTML5这个名词第一次登上“舞台”。当时的移动互联网开始逐渐兴起,发展到今,移动互联网已经和人们的日常生活密切相关。作为开发者,对于一个崭新的事物,一直在尝试的“路上”,到底最好的开发方式是什么?本文...
  • dx18520548758
  • dx18520548758
  • 2017-01-09 11:48
  • 161

移动端h5开发相关内容总结(四)

前言:看了下博客的更新时间,发现9月份一篇也没有更新。一直想着都要抽时间写一篇的,不然今年的更新记录就会断在了9月份。但是还是应为各种各样的事情给耽搁了。当内心突然涌起一股必须写点什么的时候,突然发现自己把写博客的“套路”都忘了。(●´ω`●)φ一直认为自己还是一个比较热爱思考的人。最近一...
  • yisuowushinian
  • yisuowushinian
  • 2016-10-03 16:12
  • 4790

移动端页面开发的“坑”

现在的前端开发者基本都要同时着手PC端页面和手机页面的开发工作,就目前的状况来看,手机页面的兼容性要比PC端更为复杂(当然主要是只在android端,大家懂的),而且有些样式在PC端页面上可能没什么,但是一旦到了手机页面,那就有可能是“大坑”,下面是本人自己开发手机页面过程中总结的一些问题,避免以后...
  • playboyanta123
  • playboyanta123
  • 2015-10-27 10:46
  • 4484

移动端做法。

百分比布局、弹性布局flex。 1、实现强大的屏幕适配布局: 是以320宽度为标准去做适配,超过320的大小还是以320的规格去展示流式布局的技术实现的,他们在页面布局的时候都是通过百分比来定义宽度,但是高度大都是用px来固定住,所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长 ...
  • tanlei97
  • tanlei97
  • 2017-05-08 13:38
  • 115

移动页面开发小技巧

一、meta标签的相关知识   1、移动端页面设置视口宽度等于设备宽度,并禁止缩放。   1       2、移动端页面设置视口宽度等于定宽(如640px),并禁止缩放,常用于微信浏览器页面。   1  ...
  • dmk_spy
  • dmk_spy
  • 2017-06-30 16:06
  • 72

appium并发测试

appium 介绍 Appium 是一个开源的,跨平台的自动化测试工具。 它支持模拟器(iOS,FirefoxOS,Android)和真机(iOS, Android, FirefoxOS)上的原生应用,混合应用和移动 web 应用。 appium 工作原理 appium ...
  • WHACKW
  • WHACKW
  • 2017-09-13 19:29
  • 388

web移动端项目的搭建

1.文件目录 2.头部meta标签 3.选择库Zepto.js 4.自适应方案
  • qq_35972609
  • qq_35972609
  • 2017-08-17 16:27
  • 148

前端移动页面开发屏幕适配

调试工具chrome: 调试工具用chrome我觉得就可以了,直接开发者工具转到手机调试页面,chrome不仅可以模拟随意缩放手机页面宽度和高度,还可以选择iphong等各种手机型号来模拟。 不过chrome默认中文最小的字号是12px,当小于12的时候都会以12px来显示,这就...
  • aaa333qwe
  • aaa333qwe
  • 2017-09-26 15:44
  • 94

ASP.NET MVC开发移动网站-详细篇

<br />在上一篇的文章当中当中,简单的为大家介绍了如何使用ASP.NET MVC开发符合现在趋势的移动网站.今天我就一步一步的来掩饰如何使用ASP.NET MVC 2.0来进行移动网站的开发。<br />首先,新建一个空的解决方案,命名可以根据你的项目规则来命名。然后再空...
  • oyjd614
  • oyjd614
  • 2010-08-22 21:55
  • 2629
    个人资料
    • 访问:25543次
    • 积分:694
    • 等级:
    • 排名:千里之外
    • 原创:41篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条