移动前端开发之布局篇

一. viewport

• 什么是viewport

  简单来讲，viewport就是浏览器上，用来显示网页的那一部分区域了，也就是说，浏览器的实际宽度，是和我们手机的宽度不一样的，无论你的手机宽度是320px，还是640px，在手机浏览器内部的宽度，始终会是浏览器本身的viewport。如今的浏览器，都会给自己的本身提供一个viewport的默认值，可能是980px，或者是其他值。就以手机来说吧，目前，新版本的手机浏览器，绝大部分是以980px作为默认的viewport值的。我这里对新版本的不同平台下的浏览器做了测试，经过测试，iphone下的默认viewport为980px，安卓下的浏览器，目前主流的最新浏览器（比如chrome，还有很多国产的像qq，uc）的viewport也是980px了。

• viewport是用来干什么的

  viewport的默认值，一般来说是大于手机屏幕的。这样就可以做到当我们在浏览桌面端网页的时候，可以让桌面端端网页正常显示（我们普通页面设计的时候，一般页面的主区域是以960px来做的，所以980px这个值，可以做到桌面端网页的正常显示）。但是，其实我们手机的屏幕宽度是没有960px的，因此浏览器会出现横向滚动条。同时，即使是基于980的viewport，我们在移动端浏览我们的桌面页面的体验其实也并不好，所以，一般的，我们会专门给浏览器设计一个移动端的页面。

• 对viewport的控制

  viewport默认有6个属性

• width:
  设置viewport的宽度（即之前所提及到的，浏览器的宽度详），这里可以为一个整数，又或者是字符串”width-device”

• initial-scale: 页面初始的缩放值，为数字，可以是小数
• minimum-scale: 允许用户的最小缩放值，为数字，可以是小数

• maximum-scale: 允许用户的最大缩放值，为数字，可以是小数

• height: 设置viewport的高度（我们一般而言并不能用到）

• user-scalable: 是否允许用户进行缩放，’no’为不允许，’yes’为允许

  我们把这个标签是在head里面，像这样

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />

  强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览

二. 关于我们的设备

• 三个需要了解的概念:
  
  • PPI: 可以理解为屏幕的显示密度
  • DPR: 设备物理像素和逻辑像素的对应关系，即物理像素/逻辑像素
  • Resolution: 就是我们常说的分辨率

• 物理像素与逻辑像素
  看了我们上面内容一的第一点之后，或许有些人会有些疑问，我的安卓手机，或者iphone6plus(目前应该仅限于这一款机型吧)，买回来的是1920x1080的或者其他更高的，比我之前所谓的那个viewport默认的980px要大。

  这样的问题，也就是我之前所说的物理像素与逻辑像素的关系了（即DPR）。以1920x1080为例，1080为物理像素，而我们在viewport中，获取到的，比如”width-device”，是逻辑像素。所以之前viewport的默认值，所比对的大小，其实是逻辑像素的大小，而非物理像素的大小。

  以iphone6为例，在不做任何缩放的条件下，iphone6的获取到的’width-device’为375px,为屏幕的逻辑像素。而购买时我们所知的750px，则为屏幕的物理像素。

• CSS的问题
  有了上面第二点的一些基础，还是以iphone6为例，我们可以知道，其实我们所写的1px，在iphone6上为2px的物理像素。所以，最后的，给出一个结论。就是我们写的1px，在移动端，是逻辑像素的1px，而非物理像素的1px。

三. 使用rem布局

• 简单说下rem
  rem是根据页面的根元素的font-size的一个相对的单位，即

html{
    font-size: 16px;
}   

比如当我们在一个div中，如此写

div{
    width: 2rem;
}

那么我们的width，是16*2 = 32px

• rem做到适配不同分辨率

这个是现在手机淘宝的移动端的解决方案，即使用rem的特性，来对页面进行布局。
下面举一个例子
假定设计稿的大小为750，那么我们则将整个图分成100份来看（下面的题外话会说明为什么会分成100份来看）
那么，我们现在就让根部元素的font-size为75px

html{
    font-size: 75px;
}

那么，我们现在就