一、 移动设备和电脑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）