h5 默认为移动端页面_HTML5入门教程之移动端页面布局实战

原标题：HTML5入门教程之移动端页面布局实战

一、 移动设备和电脑pc端的区别

我们要学习移动端布局首先要了解“移动端”和“网页端”布局的不同之处在于哪里？也就是屏幕的尺寸！讲到屏幕尺寸我们就不得不提viewport，它是设备终端用来显示网页的那一块区域，而非浏览器的可视区域。它可以比浏览器可视区域大可以比可视区域小，但一般来说移动设备里的viewport都比可视区域要来的大。

现在的浏览都会给提供一个viewport的一个默认的值，一般以980像素居多或者是其他值。根据对不同平台下的新版本的浏览器做了些测试，通过测试，苹果手机下的默认viewport为980像素还有安卓移动手机上的浏览器，目前主流的最新浏览器的viewport也是980像素了。

二、 viewport的实际作用

因为 viewport的默认值是980像素只适用于PC端而不适用于移动端手机屏幕。因此手机端浏览器会出现横向滚动条。同时要说的是即使是基于980像素的viewport，我们在移动端浏览我们的桌面页面的体验其实也并不好，所以，一般的，我们会控制viewport来专门给移动端的浏览器设计一个页面。

三、 viewport的实战设置

现在绝大多数的浏览器里基本都支持对viewport的一个设置。我们首先来看看viewport的一些属性，viewport一共有六个可调试设置的属性，它们分别为：

width属性: 设置layout viewport的宽度，为一个正整数，或字符串"width-device" ( 一般都是设置:"width-device")；

initial-scale属性: 设置页面的初始缩放值，为一个数字，可以带小数；

height属性: 设置layout viewport 的高度，这个属性对我们并不重要，很少使用(一般我们就不用)；

maximum-scale属性: 允许用户的最大缩放值，是一个数字，可以带小数；

minimum-scale属性: 允许用户的最小缩放值，是一个数字，可以带小数；

user-scalable属性: 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许。

下面是我们viewport的书写案例：(一般不用修改)

这样我们就可以做到对viewport进行控制了。

四、 移动端的设备

作为在移动端开发的程序员来讲，如果不了解设备的一些性能，在开发上面是非常耗时间的一件事，但同时也带来负面影响的是项目的进度。

下面是一部分移动端设备的分辨率参数：

可以看出移动端的尺寸都是各不相同的，如果要适配这些尺寸只能通过一定比例来书写。

五、 使用vw布局

移动端布局为了适应各个设备的大小，以前都是通过js配合rem做到各个设备的适应，但是使用rem需要对html的fontsize做计算，而这个计算的一个关键点是获取屏幕宽度，这里的100vw就等于屏幕宽度，这时候如果把这个计算公式放到css去做是不是会完美了，因为为了获取屏幕宽度不使用js，而用vw来解决这个问题，因为100vw = 屏幕宽度。

就是相对于浏览器viewport尺寸的单位，具体包括下面4个：

►vw – 视区宽度百分值

►vh – 视区高度百分值

►vmin – vw或vh，取小的那个

►vmax – vw或vh，取大的那个

vw的计算方式就是：元素宽度/设计图总宽度(VW)。

来源：千锋HTML5返回搜狐，查看更多

责任编辑：