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以上分区间处理或栅格处理
个人拙见，忘不吝赐教