写在前面，一直被页面适配的问题困扰，这段时间查了一些资料自己做个总结，可能会有点乱，尽量清晰，我也还在学习摸索，欢迎讨论和指正。
不同的浏览器、不同的屏幕大小，所呈现的页面布局都是有差别的，但是我们希望不管在什么浏览器、什么屏幕上，用户看到的页面都尽量统一。页面布局兼容适配的问题，主要依赖单位。我们一般写px，那么100px的宽度在1000px的屏幕上是十分之一，但是在200px的屏幕上就是二分之一，所以要实现页面适配，我们必须寻求px的替代。
一、影响页面布局的因素
首先，明确影响页面布局的几个主要因素
1、浏览器不同，尺寸不同，甚至缩放都会影响页面显示
我在win10系统下，不同的缩放比例，测试了一些浏览器的width，这里的width是通过$(window).width()获取的宽度。缩放会影响窗口尺寸
|
|
Chrome |
Firefox |
360 |
| 100% |
1920 |
1920 |
1880 |
| 115% |
1677 |
1664 |
1880 |
| 125%（win10默认） |
1536 |
1534 |
1880 |
2、屏幕尺寸不同
我们会遇到很多不同大小的显示屏，页面显示都存在差异。
3、移动设备与PC设备不同
移动设备与PC端的不同，最主要的是DPR（DPR的概念在下面会说）不同，一般PC端的DPR为1，移动设备现在基本采用高清屏，DPR都比1大，例如苹果iphone4以上都是2。
二、一些常见的名词viewport rem vw dpr
先说几个经常见到的关于页面适配、移动布局等的名词参数
1、viewport
在最初考虑移动页面适配的时候，很多人都会用到一句代码
<meta name="viewport" content="width=device-width,initial-scale=1.0">content有六个通用属性
width: 设置layout viewport的宽度，正整数或字符串 'width-device'
initial-scale: 设置页面的初始缩放值，数字或小数
minimum-scale：允许用户的最小缩放值 数字或小数maximum-scale: 允许用户的最大缩放值 数字或小数
height: 设置layout viewport 的高度，这个属性很少用到
user-scaleabel: 是否允许用户进行缩放
关于viewport的深入理解可以参考这篇文章，讲的很详细
http://www.cnblogs.com/2050/p/3877280.html
meta viewport标签是为了解决移动端适配的问题，不使用该标签，页面会缩的很小，不利于用户阅读。如果我们希望，比如字体，在移动设备上用户看到的字体大小和电脑上看到的差不多，那么就要采用这个标签。
2、em、rem
em和rem都是相对单位，都是为了移动端适配，它们可以使我们的页面设计更加灵活。em相对于父级元素，如果没有父级元素，那么就相对于浏览器的默认字体大小，这时对应的是body的字体大小，一般是16px，即1em=16px，也可以自定义。
body {
font-size: 20px;
}rem相对于html根元素，默认也是16px，1rem=16px，对应的是html的字体大小，可以自定义
html {
font-size: 20px;
}em和rem对比，em会被父级元素影响，多层嵌套之后会变得很复杂，比如一级元素20px，二级元素1.5em，那么三级元素的1em其实是1*1.5*20=30px，而不是20px，这样会带来很多麻烦，必须仔细管理各层级之间的关系。而rem是相对于根元素的，子元素的标准都是统一的，便于管理，所以在em和rem之间，选择rem做移动端适配更好。
3、vw vh
vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%，整个视区宽度就是100vw）
vh：视窗高度的百分比
vmin：当前 vw 和 vh 中较小的一个值
vmax：当前 vw 和 vh 中较大的一个值
vw、vh是直接由你看到的屏幕大小决定，它们和%不一样，%是相对于父级元素的，就像rem和em的区别一样。
现在大家更倾向用vw去解决移动端适配，移动端对height的要求比较弱，vh不用考虑太多
4、devicePixelRatio
devicePixelRatio ，它是设备上物理像素和设备独立像素( device-independent pixels (dips) )的比例，即
devicePixelRatio = 屏幕物理像素/设备独立像素DPR的详细理解可以参考以下两篇文章
https://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/
http://www.cnblogs.com/PeunZhang/p/3441110.html
设备独立像素：css的px就可以看做设备的独立像素。所以我们可以知道css中的1px并不等于设备的1px，我们需要考虑dpr的值。
屏幕物理像素：可以认为对应我们熟知的屏幕分辨率。以iphone为例，iphone3的分辨率是320*480，iphone4的分辨率是640*960，但是他们的独立像素都是320，所以iphone3的DPR是1，iphone4的则是2。
这里就要提到Retina屏，retina最早由苹果提出来，后来很多厂商推出的高清屏都是在苹果的基础上发展来的，iphone4及以后的机型都采用retina屏，特点是高像素密度，同样大小的屏幕上显示的像素点由1个变为多个。
因为DPR为2，所以在DPR为1的设备上的图片到DPR为2的设备上，1px代表的物理像素比以前多了一倍，图片会被放大，一些小图就会变模糊。所以移动端会考虑加载一张两倍的图片。
一般电脑的DPR都是1，在电脑上不用考虑dpr的影响，查看设备的DPR可以通过window.devicePixelRatio获取
三、根据自己需要采用不同解决方案
以上这些名词概念看下来可能有点不明白，下面好好整理一下自己的思路
首先明确自己需要什么，适配主要分为两部分，PC端适配和移动设备适配。PC端因为不同的浏览器和屏幕尺寸，造成页面上的差别；移动设备的屏幕更是多种多样。你是仅仅需要让自己的项目适配不同的电脑屏幕和浏览器，还是要同时考虑移动设备的适配。
1、只考虑PC端适配
那么其实viewport、rem、DPR都不需要考虑，你只要考虑怎么让你的页面在不同大小的显示屏、浏览器上，用户看到的内容布局不要差异太大。采取的方法有很多种，比如不要用px来处理所有内容，尤其是涉及到绝对定位的元素。
2、移动设备适配
移动设备的适配有两个大类的解决方案
第一，移动端和PC端共用一套代码。第二，移动端和PC端使用不同的代码。两种方案各有优劣，第一种只用一个资源，维护成本低，但是需要适配不同的设备，尤其是要同时考虑PC端和移动设备的兼容，处理起来十分麻烦；第二种，需要两套资源，维护成本高，但是可以根据不同终端推送不同页面，适配上处理起来更简单，比如，我们在电脑上使用www.test.com的资源，在手机上使用m.test.com的资源，如果是在手机上打开www的资源，判断用户使用的是手机，就会跳转到m的资源，实现方法是在www的代码head中加入判断
if ( (url.indexOf("www.test.com") != -1) && navigator.userAgent.match(/(iPhone|iPod|Android|ios|iPad)/i) ) {
// 注释这部分是考虑到子页面的跳转，那么在路径相同的情况下，直接将www改为m，就可以实现资源转换
// var newUrl = url.replace("www", "m")
// location.href = newUrl;
location.href = "http://m.test.com";
}两种方案没有谁比谁好，根据实际项目需求及复杂程度选择。
四、后语
这些适配的问题，只说概念是很抽象的，要结合到具体的项目使用中去，我也在不断学习。