老九本文中只简单探讨相对简单的独立页面设计，不考虑整站架构和交互深度。
当前实现跨屏体验的方式中，自适应相对灵活，界面体验相对统一，在页面数量较少、迭代频率较低的项目中，受到很多朋友们的青睐。实现自适应的方法和技巧同样有很多，比如使用媒体选择，使用em单位，使用百分比单位，float布局等等。但是如果随取随用，又很容易捡了芝麻丢了西瓜，整个布局体系一团乱麻。这里简单整理了自己实现小项目自适应的几种核心思路，以短平快为主。
文中@media符号指代采用CSS3引入的Media Query模块选择加载CSS。
1. 项目如果更多考虑功能性，可以将大屏体验向小屏倾斜，为大屏设置较低的有效宽度，以移动版为主，PC做适当的媒体选择兼容即可。这种体验下的CSS可以使用百分比限制元素宽度，以em辅助补充字体大小，为大屏配置独立的@media CSS。这种方式会大大降低需要自适应适配的工作量，但是也会损失大屏页面的可塑性。建议用于博客，小工具等页面。
这里推荐一个阮一峰博客上推荐的小工具，可以一键查看多种跨屏体验。
不想自行翻译的朋友们可以直接在收藏夹中新建一个标签，并修改地址为：
javascript：document.write('<!DOCTYPE html><html><head><meta charset="utf-8"><title>Responsive Design Testing</title><style>body { margin: 20px; font-family: sans-serif; overflow-x: scroll; }.wrapper { width: 6000px; }.frame { float: left; }h2 { margin: 0 0 5px 0; }iframe { margin: 0 20px 20px 0; border: 1px solid #666; }</style></head><body><div class="wrapper"><div class="frame"><h2>240<span> x 320</span> <small>(mobile)</small></h2><iframe src="' + window.location + '" sandbox="allow-same-origin allow-forms" seamless width="240" height="320"></iframe></div><div class="frame"><h2>320<span> x 480</span> <small>(mobile)</small></h2><iframe src="' + window.location + '" sandbox="allow-same-origin allow-forms" seamless width="320" height="480"></iframe></div><div class="frame"><h2>480<span> x 640</span> <small>(small tablet)</small></h2><iframe src="' + window.location + '" sandbox="allow-same-origin allow-forms" seamless width="480" height="640"></iframe></div><div class="frame"><h2>768<span> x 1024</span> <small>(tablet - portrait)</small></h2><iframe src="' + window.location + '" sandbox="allow-same-origin allow-forms" seamless width="768" height="1024"></iframe></div><div class="frame"><h2>1024<span> x 768</span> <small>(tablet - landscape)</small></h2><iframe src="' + window.location + '" sandbox="allow-same-origin allow-forms" seamless width="1024" height="768"></iframe></div><div class="frame"><h2>1200<span> x 800</span> <small>(desktop)</small></h2><iframe src="' + window.location + '" sandbox="allow-same-origin allow-forms" seamless width="1200" height="800"></iframe></div></div></body></html>')
2. 另外一种以em制霸的方式，全局EM/REM单位，实现真正意义上的“全屏幕等比例放缩”。@media只需要配置不同屏幕下的隐藏显示，以及设置字号的极限值以防止不同屏幕下字体显示过大或者过小的问题即可。
该方法核心代码参考以下JS：
(function (doc, win) {
var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if(clientWidth>=640){
docEl.style.fontSize = '100px';
}else{
docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
这种方法能最大程度的保证屏幕体验的一致，同时对不同屏幕下的比例和单位有着精准的把握。缺点就是缺乏美感，页面也不够灵活，切换为计算器模式。
3. 第三种方法就是常规以@media为核心，为各种页面做不同的CSS设计，辅助JS增强交互。这种方式能最大程度的匹配不同屏幕下的最优解，配合visible/display可以在客户端实现相同页面不同屏幕下感受到完全不同的页面体验。
这种方式可以采用bootstrap等作为基准框架，以栅格系统和float布局实现大框架的自适应。如果页面设计过程中能充分考虑到这一点，整个项目的自适应架构将会变得非常流畅和幸福。
同时可以敲定几个核心宽度，在该宽度的浮动范围内将宽度限制为该宽度的页面，也能大大拉高项目的容错率，避免一些奇奇怪怪的视觉体验。
比如我们设置了640，980，1200三个档位，我们可以将640版本用于所有小于980的屏幕，980用于980-1200，1200用于大于1200的屏幕。
该方法相对来说才算是真正的自适应布局，也更适合用于实现相对完善的项目。
4. 大部分自适应使用的viewport配置的是width=device-width, initial-scale=1；
这里有一种很偷懒的方法是使用width=device-width, maximum-scale=1.0, user-scalable=yes。
看配置也知道，这是利用屏幕的自动缩放，制造页面适应的假象。
本方法只用于偷懒。
几种思路都只适合在尝试自适应的过程中的“内功心法”，随着各种工具和技巧的熟练，可以放弃核心思路，在不同的层面使用不同方法，在使用的过程中更加出神入化。适合项目的设计才是好设计，自适应的本质就是将原本应该是几套页面的设计抽丝剥茧，尽可能的用一套框架容纳。当然，容纳不了也不要勉强，该@media就@media，再精巧的木鸟，也没有能拉百斤货物的车轮实在。