HTML5教程之移动端Web页面布局，html5教程web布局分享

一、什么是移动端项目

顾名思义，运行在移动端的项目就称为移动端项目。那什么是移动端呢，主要是指我们的一些手持设备，最具有代表性的就是我们日常使用的手机和平板，当然还包括一些其他便携设备，如智能手表，掌上游戏机，等流动装置。

二、为什么要学移动端布局

随着科技的进步，及人们日常生活节奏的加快，我们通常花费在手机等移动设备上的时间比使用电脑的时间越来越多，为了适应市场及用户的转变，越来越多的服务从PC端转向移动端，就导致移动端有着强大的发展前景和巨大的市场，作为一个Web高级前端开发工程师，移动端页面布局也成了我们必须掌握的技能之一。并且，移动互联网的大时代已经到来，学会移动端页面，才能高薪就业。

而在移动端项目的开发过程中我们也会遇到各种在PC项目中从未遇到的问题：如设备种类多且更新换代快，项目不能实时跟进;各个浏览器厂商不统一，导致各种兼容问题;网络信号强弱，导致体验不同;HTML5学习成本太高等等。

以上这些问题都需要我们前端开发人员来给出对应的解决方案，也就要求我们同时需要具有移动端页面开发的能力。

三、移动端Web布局课程如何讲授呢?主要突出以下几点：

1.什么是viewport

简单来讲移动端web页面横向看，viewport就是浏览器上移动端web页面横向看，用来显示网页的那一部分区域了。

但是，浏览器也就是viewport的实际宽度，是和我们手机的宽度不一样的，无论你的手机宽度是320px，还是640px，在手机浏览器内部的宽度，始终会是浏览器本身的viewport的宽度。

如今的浏览器，都会给自己的本身提供一个viewport的默认值，目前，新版本的手机浏览器，绝大部分是以980px作为默认的viewport值的。我这里对新版本的不同平台下的浏览器做了测试发现，iphone下的默认viewport为980px，安卓下的浏览器，目前主流的最新浏览器(比如chrome，还有很多国产的像qq，uc)的viewport也是980px了。