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

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

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

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

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

关于视口的知识，可——移动端H5知识-视口viewport

横向百分比，纵向像素值

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

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

但是，这种 *** 作导致了一个问题——主要表现在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框架——flexiblejs，通过这个框架对页面进行处理，能够防止小数点的出现。

关于flexiblejs框架的具体用法，可——移动端H5知识-处理rem小数点flexiblejs

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

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

关于MetaHandlerjs框架的具体用法，可——移动端H5知识-固定像素的实现方法

PC网站转变为手机端浏览样式，主要有以下几种方法：
一、建设对应的移动网站界面，相当于重新写一个网站，然后通过站长平台移动适配或者js代码进行识别设备跳转到对应的网站界面；
二、自适应网站和响应式网站，就是在pc端网站的css样式里面设置多一层样式（移动端样式），然后在使用移动端设备访问时，展示对应的css样式网站；
三、可以通过网站子目录来对应搭建移动网站样式，然后当用户用移动设备访问网站时，跳转到对应的目录样式展示。

移动端的网站也是和PC端的差不多，只不过需要一个专门搞移动端的前端开发来帮你做页面，使用的还是html+jq，后台出接口给前端调用，没什么差别的，需要一个会移动端开发的前端
现在市面上也有吧PC网站直接转换成移动端的网站，自己去百度下

应该说，移动端的开发是伴随着HTML5的兴起而出现的，2007年第一款iPhone诞生，2009年HTML5这个名词第一次登上“舞台”。当时的移动互联网开始逐渐兴起，发展到今，移动互联网已经和人们的日常生活密切相关。作为开发者，对于一个崭新的事物，一直在尝试的“路上”，到底最好的开发方式是什么？本文介绍了从移动端诞生到现在，自己探索到的开发方法，并配以相应知识点，欢迎跟大家沟通、分享。初次接触移动端，绝对单位的使用自己接触移动端开发是在2012年，那时候比较新潮的是制作WEBAPP。什么是WEBAPP呢？所谓的WEBAPP就是用网页模拟出原生语言（如iOS）开发的APP交互效果。虽然在表现层面上，HTML5表现突出，但不得不承认的是，在系统性能层面，WEBAPP明显要差于原生应用（即NativeAPP）。这也就使得WEBAPP这条路暂时性的被堵住了。于是，移动端的开发方向逐渐向移动端网页倾斜。对于PC端，我们一直使用的是px（像素）进行代码的书写，但是到了移动端，需要面临不同的分辨率。在2012年的时候，自己和团队成员在写移动端的时候，由于是初次接触，还是在使用px（像素）作为单位。因为在2012年的时候，绝大多数的手机的屏幕大小都是320480分辨率，所以，即便是使用像素作为单位进行移动端网页开发也是完全可以的。关于视口的知识，可——移动端H5知识-视口viewport横向百分比，纵向像素值随着移动端的继续发展，在2012年9月，iPhone5上市，开始引领“特殊分辨率”的发展，于是，320480分辨率的手机屏幕在整个手机市场当中占有的份额越来越少，各种各样的分辨率如雨后春笋般冒了出来。此时我们再进行固定像素进行开发明显是不明智的。于是，我们开始采用百分比（相对度量单位）进行盒模型横向属性（width、左右内边距、左右外边距）的制作，使用em（相对度量单位）实现文字的处理。但盒模型纵向上还是使用固定像素作为单位。但是，这种 *** 作导致了一个问题——主要表现在img标签的处理上。成都软件开发公司标签进行计算的。相比之下，rem的计算起来要简单很多。于是，自己尝试用rem解决横向以及纵向的设置，舍弃掉了百分比，发现还是挺不错的，算是兼容了绝大多数机型和浏览器。之后，在使用一款华为手机进行测试的时候，发现并不支持横向的rem。于是，又需要想法啦~~~正解——横向百分比，纵向rem针对华为手机，我尝试了横向百分比，发现还是能够支持的，于是就折中了一下，横向使用百分比进行控制，纵向使用rem作为单位。此时能够实现所有浏览器的兼容。优化正解——横向百分比，纵向rem在横向使用百分比，纵向使用rem时，会由于计算产生一定的误差，于是，运用学习过的一些HTML5技术，进行移动端页面的优化，例如，使用CSS3的盒阴影替换掉边框。而对于rem，在计算中通常是存在一定的字体误差的（会计算出小数点），此时正好接触了一下淘宝的移动端页面，看到了一个不错的JS框架——flexiblejs，通过这个框架对页面进行处理，能够防止小数点的出现。关于flexiblejs框架的具体用法，可——移动端H5知识-处理rem小数点flexiblejs优化正解2——任性的使用固定像素来实现上个月月初，发现网易移动端的制作方法有些特殊，查看代码时发现，网易采用了固定像素进行书写，而通过MetaHandlerjs进行了页面的控制。最近尝试了一下，感觉还是挺不错的，兼容也是比较好的，不失为一种好方法。关于MetaHandlerjs框架的具体用法，可——移动端H5知识-固定像素的实现方法

前端开发中PC端和移动端网站的区别，主要是：

1、PC端在开发过程中考虑的是浏览器兼容性，移动端开发中考虑的是手机兼容性问题，做移动端开发，更多考虑的是手机分辨率的自适应和不同手机 *** 作系统的略微差异化；

2、在部分事件的处理上，移动端自然是偏向于触屏的，另外包括移动端d出的手机键盘该如何处理，这样的问题在PC上肯定不会遇到，但在移动端，如果你没有经验，处理起来是相当麻烦的；

3、布局上，移动端开发是要做到页面布局自适应的，而PC端页面布局的比例会相对固定；

4、在动画效果处理上，PC端要考虑IE的兼容性，通常用JS做动画的通用性会好一些，但相比CSS3却牺牲了较大的性能，而在手机端，如果要做一些动画、特效等，第一选择肯定是CSS3，既简单，效率又高。

总结：以上是移动端和PC端比较突显的区别，在实际的开发应用过程中，还会有更多的差异化区别。

---