一、 移动设备和电脑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的书写案例：（一般不用修改）
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
这样我们就可以做到对viewport进行控制了。
四、 移动端的设备
作为在移动端开发的程序员来讲，如果不了解设备的一些性能，在开发上面是非常耗时间的一件事，但同时也带来负面影响的是项目的进度。
下面是一部分移动端设备的分辨率参数：
可以看出移动端的尺寸都是各不相同的，如果要适配这些尺寸只能通过一定比例来书写。
五、 使用vw布局
移动端布局为了适应各个设备的大小，以前都是通过js配合rem做到各个设备的适应，但是使用rem需要对html的fontsize做计算，而这个计算的一个关键点是获取屏幕宽度，这里的100vw就等于屏幕宽度，这时候如果把这个计算公式放到css去做是不是会完美了，因为为了获取屏幕宽度不使用js，而用vw来解决这个问题，因为100vw=屏幕宽度。
就是相对于浏览器viewport尺寸的单位，具体包括下面4个：
？vw – 视区宽度百分值
？vh – 视区高度百分值
？vmin – vw或vh，取小的那个
？vmax – vw或vh，取大的那个
vw的计算方式就是：元素宽度/设计图总宽度（VW）。
|
