手机端的页面怎么写( 二 ) _页面

5. 手机端的页面需要注意些什么 1、布局需要用百分比，单位用em或者rem，一般常用em.
2、主要屏幕适配，android和ios的适配不一样。
3、主要图片资源的缩放比例，如果太小的话缩小会模糊，电脑浏览器和手机效果有差距。
4、图片、音频等资源的大小，如果太大加载会出现很慢，也很浪费流量和带宽。
5、注意多看看webview的知识，不然会出现电脑浏览器调试通过，手机就会出现各种各样的奇怪现象。
6、HTML、CSS布局一定要精简，JS、Jquery代码都要写的合理，这样才能适配多手机浏览器。
6. 如何进行移动端的页面开发应该说，移动端的开发是伴随着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标签的处理上。成都软件开发公司标签进行计算的。
相比之下，rem的计算起来要简单很多。于是，自己尝试用rem解决横向以及纵向的设置，舍弃掉了百分比，发现还是挺不错的，算是兼容了绝大多数机型和浏览器。
之后，在使用一款华为手机进行测试的时候，发现并不支持横向的rem 。于是，又需要想办法啦~~~ 正解 —— 横向百分比，纵向rem 针对华为手机，我尝试了横向百分比，发现还是能够支持的，于是就折中了一下，横向使用百分比进行控制，纵向使用rem作为单位。
此时能够实现所有浏览器的兼容。优化正解 —— 横向百分比，纵向rem 在横向使用百分比，纵向使用rem时，会由于计算产生一定的误差，于是，运用学习过的一些HTML5技术，进行移动端页面的优化，例如，使用CSS3的盒阴影替换掉边框。
而对于rem，在计算中通常是存在一定的字体误差的（会计算出小数点），此时正好接触了一下淘宝的移动端页面，看到了一个不错的JS框架——flexible.js，通过这个框架对页面进行处理，能够防止小数点的出现。关于flexible.js框架的具体用法，可点击查看——移动端H5知识-处理rem小数点 flexible.js 优化正解2 — 。