响应式设计与自适应设计的区别：响应式开发一套界面，通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容；自适应需要开发多套界面，通过检测视口分辨率，来判断当前访问的设备是pc端、平板、手机，从而请求服务层，返回不同的页面。
CSS3媒体查询可以让我们针对不同的媒体类型定义不同的样式，当重置浏览器窗口大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
如何确定媒体查询的分割点也是一个开发中会遇到的问题，下面是市场上的移动设备和电脑屏幕分辨率的分布情况，可以发现不同品牌和型号的设备屏幕分辨率一般都不一样
如果我们选择600px,900px,1200px,1800px作为分割点，可以适配到常见的14个机型：
当然这只是其中的一种分割方案，我们还可以这样划分：480px,800px,1400px,1400px
而作为曾经典型的响应式布局框架，Bootstrap是怎么进行断点的呢？
上面的分割方案不一定满足项目中的实际需求，我们可以先用跨度大的分割点进行分割，如果出现不适配的情况可以再根据实际情况增加新的分割点。
不管是移动优先还是PC优先，都是依据当随着屏幕宽度增大或减小的时候，后面的样式会覆盖前面的样式。因此，移动端优先首先使用的是min-width，PC端优先使用的max-width。
移动优先:
/*iphone678*/body{background-color:yellow;}/*iphone5*/@mediascreenand(max-width:320px){body{background-color:red;}}/*iphoneX*/@mediascreenand(min-width:375px)and(-webkit-device-pixel-ratio:3){body{background-color:#0FF000;}}/*iphone678plus*/@mediascreenand(min-width:414px){body{background-color:blue;}}/*ipad*/@mediascreenand(min-width:768px){body{background-color:green;}}/*ipadpro*/@mediascreenand(min-width:1024px){body{background-color:#FF00FF;}}/*pc*/@mediascreenand(min-width:1100px){body{background-color:black;}}PC优先：
/*pcwidth>1024px*/body{background-color:yellow;}/*ipadpro*/@mediascreenand(max-width:1024px){body{background-color:#FF00FF;}}/*ipad*/@mediascreenand(max-width:768px){body{background-color:green;}}/*iphone678plus*/@mediascreenand(max-width:414px){body{background-color:blue;}}/*iphoneX*/@mediascreenand(max-width:375px)and(-webkit-device-pixel-ratio:3){body{background-color:#0FF000;}}/*iphone678*/@mediascreenand(max-width:375px)and(-webkit-device-pixel-ratio:2){body{background-color:#0FF000;}}/*iphone5*/@mediascreenand(max-width:320px){body{background-color:#0FF000;}}2.百分比布局通过百分比单位，可以使得浏览器中组件的宽和高随着浏览器的高度的变化而变化，从而实现响应式的效果。Bootstrap里面的栅格系统就是利用百分比来定义元素的宽高，CSS3支持最大最小高，可以将百分比和max(min)一起结合使用来定义元素在不同设备下的宽高。
子元素的height或width中使用百分比，是相对于子元素的直接父元素，width相对于父元素的width，height相对于父元素的height；子元素的top和bottom如果设置百分比，则相对于直接非static定位(默认定位)的父元素的高度，同样子元素的left和right如果设置百分比，则相对于直接非static定位(默认定位的)父元素的宽度；子元素的padding如果设置百分比，不论是垂直方向或者是水平方向，都相对于直接父亲元素的width，而与父元素的height无关。跟padding一样，margin也是如此，子元素的margin如果设置成百分比，不论是垂直方向还是水平方向，都相对于直接父元素的width；border-radius不一样，如果设置border-radius为百分比，则是相对于自身的宽度，除了border-radius外，还有比如translate、background-size等都是相对于自身的；
从上述对于百分比单位的介绍我们很容易看出如果全部使用百分比单位来实现响应式的布局，有明显的以下两个缺点：
REM是CSS3新增的单位，并且移动端的支持度很高，Android2.x+,ios5+都支持。rem单位都是相对于根元素html的font-size来决定大小的,根元素的font-size相当于提供了一个基准，当页面的size发生变化时，只需要改变font-size的值，那么以rem为固定单位的元素的大小也会发生响应的变化。因此，如果通过rem来实现响应式的布局，只需要根据视图容器的大小，动态的改变font-size即可（而em是相对于父元素的）。
rem响应式的布局思想：
rem布局的缺点：
在响应式布局中，必须通过js来动态控制根元素font-size的大小，也就是说css样式和js代码有一定的耦合性，且必须将改变font-size的代码放在css样式之前
/*上述代码中将视图容器分为10份，font-size用十分之一的宽度来表示，最后在header标签中执行这段代码，就可以动态定义font-size的大小，从而1rem在不同的视觉容器中表示不同的大小，用rem固定单位可以实现不同容器内布局的自适应。*/functionrefreshRem(){vardocEl=doc.documentElement;varwidth=docEl.getBoundingClientRect().width;varrem=width/10;docEl.style.fontSize=rem+'px';flexible.rem=win.rem=rem;}win.addEventListener('resize',refreshRem);REM布局也是目前多屏幕适配的最佳方式。默认情况下我们html标签的font-size为16px,我们利用媒体查询，设置在不同设备下的字体大小。
用视口单位度量，视口宽度为100vw，高度为100vh（左侧为竖屏情况，右侧为横屏情况）。例如，在桌面端浏览器视口尺寸为650px，那么1vw=650*1%=6.5px（这是理论推算的出，如果浏览器不支持0.5px，那么实际渲染结果可能是7px）。
那么vw或者vh很类似百分比单位。vw和%的区别为：
从对比中我们可以发现，vw单位与百分比类似，单确有区别，前面我们介绍了百分比单位的换算困难，这里的vw更像"理想的百分比单位"。任意层级元素，在使用vw单位的情况下，1vw都等于视图宽度的百分之一。
使用视口单位来实现响应式有两种做法：
对于设计稿的尺寸转换为为单位，我们使用Sass函数编译
//iPhone6尺寸作为设计稿基准$vm_base:375;@functionvw($px){@return($px/375)*100vw;}无论是文本还是布局宽度、间距等都使用vw作为单位
.mod_banner{position:relative;padding-top:percentage(100/700);//使用padding-topheight:0;overflow:hidden;img{width:100%;height:auto;position:absolute;left:0;top:0;}}2.搭配vw和rem虽然采用vw适配后的页面效果很好，但是它是利用视口单位实现的布局，依赖视口大小而自动缩放，无论视口过大还是过小，它也随着时候过大或者过小，失去了最大最小宽度的限制，此时我们可以结合rem来实现布局
给根元素大小设置随着视口变化而变化的vw单位，这样就可以实现动态改变其大小
限制根元素字体大小的最大最小值，配合body加上最大宽度和最小宽度
//rem单位换算：定为75px只是方便运算，750px-75px、640-64px、1080px-108px，如此类推$vm_fontsize:75;//iPhone6尺寸的根元素大小基准值@functionrem($px){@return($px/$vm_fontsize)*1rem;}//根元素大小使用vw单位$vm_design:750;html{font-size:($vm_fontsize/($vm_design/2))*100vw;//同时，通过MediaQueries限制根元素最大最小值@mediascreenand(max-width:320px){font-size:64px;}@mediascreenand(min-width:540px){font-size:108px;}}//body也增加最大最小宽度限制，避免默认100%宽度的block元素跟随body而过大过小body{max-width:540px;min-width:320px;}5.图片响应式这里的图片响应式包括两个方面，一个就是大小自适应，这样能够保证图片在不同的屏幕分辨率下出现压缩、拉伸的情况；一个就是根据不同的屏幕分辨率和设备像素比来尽可能选择高分辨率的图片，也就是当在小屏幕上不需要高清图或大图，这样我们用小图代替，就可以减少网络带宽了。
图片自适应意思就是图片能随着容器的大小进行缩放，可以采用如下代码：
img{display:inline-block;max-width:100%;height:auto;}inline-block元素相对于它周围的内容以内联形式呈现，但与内联不同的是，这种情况下我们可以设置宽度和高度。max-width保证了图片能够随着容器的进行等宽扩充（即保证所有图片最大显示为其自身的100%。此时，如果包含图片的元素比图片固有宽度小，图片会缩放占满最大可用空间），而height为auto可以保证图片进行等比缩放而不至于失真。如果是背景图片的话要灵活运用background-size属性。
那么为什么不能用width：100%呢？因为这条规则会导致它显示得跟它的容器一样宽。在容器比图片宽得多的情况下，图片会被无谓地拉伸。
如果浏览器不支持srcset，则默认加载src里面的图片。
但是你会发现实际情况并不是如此，在Mac上的Chrome它会同时加载srcset里面的那张2x的，还会再去加载src里面的那张，加载两张图片。顺序是先把所有srcset里面的加载完了，再去加载src的。这个策略比较奇怪，它居然会加载两张图片，如果不写src，则不会加载两张，但是兼容性就没那么好。这个可能是因为浏览器认为，既然有srcset就不用写src了，如果写了src，用户可能是有用的。而使用picture就不会加载两张
另外使用source，还可以对图片格式做一些兼容处理：
现在的css，UI框架等都已经考虑到了适配不同屏幕分辨率的问题，实际项目中我们可以直接使用这些新特性和框架来实现响应式布局。可以有以下选择方案：
在实际项目中，我们可能需要综合上面的方案，比如用rem来做字体的适配，用srcset来做图片的响应式，宽度可以用rem，flex，栅格系统等来实现响应式，然后可能还需要利用媒体查询来作为响应式布局的基础，因此综合上面的实现方案，项目中实现响应式布局需要注意下面几点：