一般的解决方案有两种，rem布局和百分比布局。这两种方案我有都试过，所以现在更推荐用rem布局来制作手机页面
rem布局的兼容性：
Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+、ie6-ie8 还是别用rem
不过现在的手机一般浏览器，一般可以直接不用去管IE内核的浏览器了。
REM的计算公式
例:html 设置font-size:16px 1rem = 16px
那么640px = 640/16 =40rem
个人建议设置为100px 方便计算
首先，给页面的html定义一个100px的
html{ font-size:100px}/*设定基础rem*/
然后，最核心的代码就是这一段js运算了，根据页面的大小来控制基础rem的值；
new function (){
var _self = this
_self.width = 640//设置默认最大宽度
_self.fontSize = 100//默认字体大小
_self.widthProportion = function(){var p = (document.body&&document.body.clientWidthdocument.getElementsByTagName("html")[0].offsetWidth)/_self.widthreturn p>1?1:p<0.5?0.5:p}
_self.changePage = function(){
document.getElementsByTagName("html")[0].setAttribute("style","font-size:"+_self.widthProportion()*_self.fontSize+"px !important")
}
_self.changePage()
window.addEventListener("resize",function(){_self.changePage()},false)
}
demo
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta charset="utf-8">
<title>rem基础布局</title>
<script type="text/javascript">
new function (){
var _self = this
_self.width = 640//设置默认最大宽度
_self.fontSize = 100//默认字体大小
_self.widthProportion = function(){var p = (document.body&&document.body.clientWidthdocument.getElementsByTagName("html")[0].offsetWidth)/_self.widthreturn p>1?1:p<0.5?0.5:p}
_self.changePage = function(){
document.getElementsByTagName("html")[0].setAttribute("style","font-size:"+_self.widthProportion()*_self.fontSize+"px !important")
}
_self.changePage()
window.addEventListener("resize",function(){_self.changePage()},false)
}
</script>
<style type="text/css">
/*=== base style===*/
*{margin: 0pxpadding: 0px}
ul{list-style: none}
.wrap{min-width: 320pxmax-width: 640pxwidth: 100%margin: 0px autobackground: #2a6acefont-family:"微软雅黑", "helvetica neue",tahoma,"hiragino sans gb",stheiti,"wenquanyi micro hei",\5FAE\8F6F\96C5\9ED1,\5B8B\4F53,sans-seriffont-size: 12px}/*适用于手机端：字体大小用em，1em=16px；为默认字体大小最大宽度640*/
.pro{width:6.2remmargin: 0px autopadding-top: 20pxoverflow: hidden}
.clearfix:after {content:""height:0display:blockclear:both}
.clearfix {zoom:1}
.pro ul{width:6.4rem}
.pro li{width: 3remheight: 3.6remfloat: leftmargin: 0 0.2rem 0.2rem 0}
.pro li .box{width: 3remheight: 3rembackground: #ccc}
.pro li p{font-size: 0.24remline-height: 0.6remtext-align: center}
</style>
</head>
<body>
<div class="wrap">
<div class="pro">
<ul class="clearfix">
<li><div class="box"></div><p>区块文案</p></li>
<li><div class="box"></div><p>区块文案</p></li>
<li><div class="box"></div><p>区块文案</p></li>
<li><div class="box"></div><p>区块文案</p></li>
<li><div class="box"></div><p>区块文案</p></li>
</ul>
</div>
</div>
</body>
</html>
可以看看HTML5混合式开发课程体系了解各个课程阶段学习的内容，大致分三个课程阶段学习：
第一阶段：PCterminal
★ PC端页面重构
1、认知行业、岗位、部分专业术语，就业趋势与行业未来展望；
2、HTML5核心元素及布局应用；
3、CSS3核心属性及布局应用；
4、图形、图像软件的使用（PS,FW,AI）；
5、浏览器兼容及解决方案；
6、图片整合、滑动门及宽高自适应等高级应用技术；
7、初步接触JS。
★ PC端交互开发（原生JS）
1、javascript基础语法和变量、控制语句、循环语句、函数、事件处理、数组、常见排序算法；
2、DOM *** 作和BOM *** 作；
3、定时器、Cookie本地存储、内置对象、正则表达式、闭包、JS面向对象语法、JSON、堆栈结构；
4、Ajax动态读取数据、异步 *** 作、与DOM、JSON的结合使用；
5、各种主流浏览器兼容性处理；
6、单例、工厂、代理、观察者等设计模式；
7、ECMA6.0新特性介绍。
★ PC端交互开发 （JQuery）
1、初识jQuery、jQuery的优势、jQuery框架核心功能、最容易混淆的几个概念
2、jQuery各种选择器的使用，及选择器的应用优化；
3、Dom节点 *** 作、插入、删除、复制、移动节点等 *** 作；
4、事件处理、事件处理模型、事件处理机制、jQuery事件封装机制、jQuery事件应用；
5、jQuery中的动画、动画时间的概念、基本动画方法、复杂动画方法、停止动画与参数说明、jQuery动画的队列问题；
6、表单开发，设计可用性表单、表单验证、增强型表单；
7、Ajax、XMLHttpRequest 基础、jQuery Ajax、工具函数、缓存；
8、在jQuery中编写插件、插件扩展、插件应用、jQuery.pagination分页、jQuery.qtip信息提示、 jQuery.artDialogd出层、jQuery.jscrollpane滚动条；
9、理解模块式开发，以及requirejs插件的使用。
★ PC项目实训
1、了解项目需求，项目流程；
2、了解项目管理，模块分配，项目时间预估；
3、了解产品周期，参与团队协作；
4、综合运用HTML+CSS,JS,JQ,JQUERY UI, jquery easyui等技术，完成大型PC端项目开发。
第二阶段：Mobile terminal
★ HTML5+CSS3新添特性
1、HTML5概述，新增的元素和废除的元素、全局属性；
2、HTML5基础：新增文档结构元素（Article、section、nav）智能表单、文件API（FileList对象和File对象、FileReader接口）、拖放API；
3、CSS3基础：新增的后代选择器、伪类选择器、文本阴影、圆角、盒阴影、变形处理（transform）、动画（transitions）、帧定义（key-frames）、旋转（rotate）、 animation；
4、HTML5多媒体audio音频元素、Video视频元素、视频回调事件；
5、本地存储web storage、本地缓存；
6、定位基础知识以及原理，结合google（高德）地图定位；
7、响应式布局概念以及语法（@media）、web网页和mobile网页的区别、样式继承；
8、Canvas标签基础知识、绘制矩形、绘制圆形、使用路径、图像裁剪、保存为文件、创建动画。
★ WebAPP项目开发及实训
1、angular.js、backbone.js；
2、数据交互，ajax与DOM交互应用；
3、HTML5+CSS3在实际项目中的应用；
4、项目管理，模块分配，项目时间预估；
5、产品周期，团队协作；
6、微信场景开发；
7、微信平台互动开发。
第三阶段：混合应用开发及实训
★ 混合应用开发及综合实训
1、混合开发原理；
2、APP与webAPP；
3、混合应用与HTML页面交互；
4、通过客户端传递数据；
5、项目的版本迭代；
6、项目打包与应用，生成APK。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）