从1920*1080到移动端的响应式自适应结合

1.先谈一下响应式和自适应的区别

响应式：它是将已有的开发技巧（弹性网格布局、弹性图片、媒体和媒体查询）整合起来，针对任意设备对网页内容进行“完美”布局的一种显示机制。简言之，是一个网站能够兼容多个终端（手机、Pad、电脑）的布局方法，而不需要为每个终端书写一套特定版本的代码。

自适应：移动端的发展带来了自适应布局。通过JS及CSS的控制，借助rem、百分比等相对度量单位，让代码在多种分辨率的移动端正常呈现。自适应布局，是当前移动端实现网页布局的最常用的布局方法，需要综合使用多种知识。

2.想要移动端各个机型下都能完美显示，首先想到的方法就是自适应的rem/百分比，现在一般手机版的设计稿会按750px作为一个标准尺寸，以下为rem.js（750px下100px=1rem）

//根据屏幕设定html字体
(function (doc, win) {
 var docEl = doc.documentElement,
 resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
 recalc = function () {
  // 获取当前浏览器窗口宽度
  var clientWidth = docEl.clientWidth;
  var clientHeight = docEl.clientHeight;
  if (!clientWidth) return;
  // 设置字体大小
  docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
  // 当窗口大于750，设置字体为固定大小
  if(clientWidth>=750){
   docEl.style.fontSize = 100 * (750 / 750) + 'px';
  }
 };
 if (!doc.addEventListener) return;
 win.addEventListener(resizeEvt, recalc, false);
 doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

3.想要完美显示750px到1920px内容，有两种方案：

一、bootstrap的栅格布局思想（此方案适用于列表项展示的栅格化内容展示）；

二、媒体查询（将此区间的分辨率分为几个区间，每个区间设置不同的宽、高、字体大小等内容）

注：区间的划分，根据页面元素的布局挑选几个关键性节点。（依据的思想就是：当某个节点开始，上一步设置的元素大小已不再美观，就以此节点作为一个区间的开始）

@media only screen and (max-width: 768px) {
    
}
@media only screen and (min-width: 769px) and (max-width: 1000px) {
    
}
@media only screen and (min-width: 1001px) and (max-width: 1440px) {
    
}

@media only screen and (min-width: 1440px) and (max-width: 1920px) {
    
}

 4.最后将步骤2和3结合起来使用，即768px下以750px为标准使用rem单位，768px以上分区间处理或栅格处理

 

个人拙见，忘不吝赐教