一、响应式布局：
// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }二、移动端适配
移动设计图： 640px，iopne6： 750px
PC屏： 1240px， 960px
概念：
屏幕尺寸： 屏幕对角线（英寸）
屏幕分辩率： 物理像素（像素点） 1024*1980 px
- 1px： 1横向像素 * 1纵向像素
- 就是卖手机标注的屏幕像素
屏幕像素密度（PPI）： 一英寸内的拥有的像素
设备独立像素：
是一种可以被程序所控制的虚拟像素，在Web开发中对应CSS像素
- 占满屏幕的虚拟的开发像素
像素比： 物理像素/设备独立像素
2.1 为什么适配：
像素：
位图像素： 图片的像素
- 当位图像素 = 物理像素才能完美显示
视口：
视觉视口： （就是文档的实际在浏览器中的大小）
- 就是html元素
- 随用户的缩放改变，即网页开发配置的尺寸被改变
- 网站设计稿，是小于等于视觉视口的
布局视口：（设备出厂定好了， 不能改变， 就是屏幕大小，不是屏幕分辩率）
- 浏览器默认的不出现滚动条的屏幕大小，所以，在移动端， 网页设计尺寸， 不超过布局视口就不出现滚动条，（即配置的视觉视口大于布局视口）
- 滚动条只于布局视口有关
- 移动端要保证， 视觉视口 = 布局视口 ， 才能完整网页
<meta name='viewport' width = 'device-width'/>
// 布局视口等于视觉视口- width = ‘device-width‘ 这个相当于移动端的协议，必须签， 不签的话， 调式工具的
像素比, 就会出错 ； 签了才是DPR=2, 或者DPR=3； - pc端viewport无效
理想视口：
- 签了协议的视口
获取视口的方法：
PC： 只有一个视口
document.docmentElenment.clientWidth (不包空滚动条)
window.inderWidth = 包括滚动条
screen.width = 分辨率
完美视口：
<meta name='viewport' width = 'device-width, inition-scale=1.0'/> 移动端：
document.docmentElenment.clientwidth = 布局视口
window.inderWidth = 视觉视口（不用，兼容不好）
screen.width = 布局视口/或理想视口（不用）
缩放：
用户缩放
PC： 会影响视觉视口，布局视口
移动端： 会影响视觉视口， 不影响布局视口
系统缩放
改变理想视口，做缩放
旋转:
完美视口，能解决旋转兼容问题
图片：（设计 位图像素 == 物理像素（分辨率））
锐化： 图片缩小
失真： 图片放大
适配： 不同设备等比还原设计图
1、rem适配：
- 改变了一个元素在不同设备上占据的css像素的个数
- html的高宽==视觉视口，width，height，只读；用户缩放会影响
rem基于html的fontSize的大小; 所以所设计图与html的font-size进行等比
（function(){
var styleNode = document.createElement('style')
var htmlW = document.documenElement.clientWidth / 16 //将视觉视口分成16份
styleNode.innerHtml = `html{font-size:${htmlW} !important}` // 利用css才有！imporant属性， 将根字体固定，防止误改
document.head.appendChild(styleNode)
}）()- 利用css才有！imporant属性， 将根字体固定，防止误改
优点 ： 没有破坏完美视口
缺点： px到rem太复杂
2、viewport适配
- 改变视觉视口的大小， html的宽度， 使之等于设计图
- 不同设备css像素一样， 视觉视口缩放不一样
(function(targetWidth){
let targetWidth = 640;
var scale = documentElement.clientWidth/targetWidth
var meta = document.querySelector(meta[name='viewport'])
meta.content = `initial-scale=${scale},minimum-scale=${scale},maximum-scale=${scale}, user-scaleble=no`
})()优点： 所量即所得
缺点： 没有实现完美视口
3、 百分比适配（页面简单可以）
4、vw方案
- vw也是一个相对单位，它相对的是布局视口，1vw就是1%的布局视口宽度。
5、flexible, 是查询屏幕，生成font-size的大小， 所以在不需要适配的时候， 还是要@media 做限定
一物理像素:
1、 图片做border线
2、meta标签：
- rem适配+scale缩放，border用px（taobao方案）
- 这样会改变，适配， 不推荐
3、css3属性；
- @media + transform： scale（1/dpr）缩放 （主流：）
4、box-shadow：
- -webkit-box-shadow:0 1px 1px -1px rgba(0, 0, 0, 0.5);