网页自适应和响应式方案

一、区别自适应和响应式
手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366×768），有的还达到了2000像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。
很多网站的解决方案，是为不同的设备提供不同的网页，比如专门提供一个mobile版本，或者iPhone / iPad版本。
此时容易想到自适应，什么是自适应呢？看看这里。http://m.ctrip.com/html5/
自适应是为了解决如何才能在不同大小的设备上呈现同样的网页，自适应的目标对象是Mobile端web页面，设计师出一张图，开发人员写一套代码，来适配不同手机不同浏览器。字体大小会因为设备而改变，字体大小通常写相对单位，比如rem。

这样做固然保证了效果，但是比较麻烦，同时要维护好几个版本，而且如果一个网站有多个portal（入口），会大大增加架构设计的复杂度。于是，很早就有人设想，能不能“一次设计，普遍适用”，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整网页内容多少。
自从twitter开源了bootstrap，响应式布局进入大家的视野。什么是响应式呢？看看这里。http://segmentfault.com/
响应式设计的目标对象是PC端和Mobile端web页面，设计师出一张图，告诉开发人员，在PC上要显示哪些内容，在Mobile上要显示哪些内容，只需要一个url，一套代码即可。字体大小不会改变，字体大小通常写绝对单位，只是动态显示某部分或者隐藏某部分内容。

二、自适应方案
1、px，电脑屏幕到手机屏幕
原理：
参考网站：http://movie.miguvideo.com/
2、px，百分比，max-width
原理：
参考网站：http://m.360haoyao.com/
3、rem，加载js文件改变根字体大小
原理：动态改变字体大小
参考网站：http://m.pinganfang.com/

4、vw，postcss

原理：借助css的vw单位

参考网站：https://huodong.m.taobao.com/act/layouttestvw.html

三、响应式方案

1、媒体查询
A、加载不同的样式表

<link rel="stylesheet" media="(device-height: 480px) and (-webkit-min-device-pixel-ratio:2)" href="iphone4.css" />
<link rel="stylesheet" media="(device-height: 568px)and (-webkit-min-device-pixel-ratio:2)" href="iphone5.css" />
// 竖放样式
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">    
// 横放样式
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">   

B、样式中处理

@media only screen and(min-width:1024px){
  .content{
    width:1000px;
    margin:auto;
  }
}
@media only screen and(min-width:400px) and (max-width:1024px){
  .rightBox{
    width:0;
  }
  .leftBox{width:30%;}
  .middleBox{width:65%;}
}
@media only screen and (max-width:400px){
  .leftBox, .rightBox,  middleBox{
    width:98%;
    height:200px;
  }
}

C、常用的媒体查询断点

// iphone4，4s（max-width：320px）
@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){}
// iphone5（max-width：320px）
@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){}
// iphone6
@media screen and（max-width：375px）and（max-height：667px）{}
// iphone6s
@media screen and（max-width：414px）and（max-height：736px）{}
// 竖屏样式
@media all and (orientation:portrait) {}
// 横屏样式
@media all and (orientation:landscape) {}

2、弹性盒子
用flex实现，立即前往。

3、网格布局

用grid实现，立即前往。

4、按比例缩放DIV

用react的组件生命周期实现和方法。

四、总结
【自适应】和【响应式设计】根本区别在于显示内容，响应式设计会根据设备来显示不同的内容，而自适应会显示相同的内容，不管设备是什么。
综上，你的网站是怎么设计的？是做成一套响应式代码？还是PC端做一套，Mobile端做一套，互不干涉？这要根据业务场景需要来决定。

转载于:https://www.cnblogs.com/camille666/p/autoadapt_respond.html