“优雅”有点太内个了，我姑且认为你是为了将来好维护好升级吧。

抛弃业务形态去谈技术选型很难得出真正有价值的结论。怎么做首先要看你做什么，比如你要运输大量生猪，那你照着Smart来设计车辆肯定是不行的。另外，现实当中，采用什么样的技术方案还要看其他部门尤其是老板的要求……

既然你提到首页、列表页、内容页，那我猜你可能要做垂直内容类网站，比如 网易新闻 、 腾讯数码 这种。对于这类网站，首先我不建议你采用方案3。以我在媒体工作的经验，把所有文章露出规则写两遍绝对是给大家挖坑。至于是否使用响应式（Bootstrap提供了比较可靠地解决方案）全看你们首页怎么要求了，如果非要采用传统的布局（如网易新闻），那可能只有用方案2；如果大家都比较先进，对广告客户没那么跪舔，首页可以不堆链接，当然方案一更合适。

2 比较佳 移动端流量是不得不考虑的因素 flash支持什么相比都是次要的 但是翻过来移动端可以搞html5 pc至今还放不下IE6吧

更好的解决方案是检测到移动端给他个wap页面 但是让他去下客户端 真的需要把移动端页面做的像app那样么 除非是淘宝这种app内也能复用的

方案1，写一份css专门给移动端，如果你需要细节的话

1.bootstrap适合快速开发，如果要做到精细还是自己写，这样做好处毋庸置疑，自己的东西整起来方便，具体细节清楚，维护和改动都较容易。缺点：代码量大，花时长。
2.这个要看场景和你网站的功能，不必单写一套页面，只需要写不同分别率下的css就可以了，你可以去我的网站看看，也可以根据js在不同分辨率下进行配合使用，添加或者删减相应区块。
3.楼主实在不想自己写的话可以调用云适配或者百度等一些公司对移动端写的插件，可以自己适配你移动端的样式，这个方便快捷，但是不是很成熟，只是固定的版块样式，不一定适合你，自己衡量吧。

我会选择方案一。写一套代码，分别实现想要的结果，才是“优雅”的方式。细节可以慢慢调，总能解决的。

可以自己写一个轻量级的CSS，用@MEDIA就可以

能不能把场景给说一下，方案和场景是挂钩的，场景不定，方案也是不定。

如果要选优雅的方案肯定是方案一啊。css里面用 @media 写一点规则即可。
一般移动端和web端功能定位差距较大的话就必须要使用方案二。如果站点只是在不同分辨率下的提供了不同展示效果那没必要舍弃简单做法寻求复杂的。

现在大多数网站都会采用方案2，使用UA识别是否为移动端，然后跳转到移动界面。同时在此基础上，用响应式对移动界面不同分辨率下进行一定程度的优化。

同时兼顾PC和移动端利用响应式设计难度也不大，但是目前我很少看见大站点在用，倒是一些个人博客用的比较多。细节定义上局限性可以说是没有，在设计时遵循移动优先、性能递增的原则，难度根据页面复杂度而定。（多说几句：响应式设计不仅要保证手机端的浏览体验，比如界面、字号等，还要保障速度，不加载多余资源或加载压缩资源等等，这方面就相对折腾一点，尤其是当你使用xx库的时候，也许移动端又比PC端更好的替代品……总之，实现是可以的，就是真的要完美体验的话，细节上比较繁琐，需要琢磨和调试）

咦我居然扯了这么多……Bootstrap能够提升开发效率，但自己多写写能学到更多

方案四，自己造輪子，實現一個輕量級類 Bootstrap CSS 框架。
優勢：無限的靈活性與可重用性。
缺點：可能與原有項目重複，造成浪費。

若造不出與原有輪子截然不同的輪子，不建議選擇方案四。

什麼是優雅？優雅就是將複雜難看的實現細節統統隱藏，只暴露簡潔抽象的宏觀接口，這是方案一與方案四的共通之處。

至於方案二和三，完全可以自己將響應式的統一模式提煉出來，達到結合方案一和四的效果，即在 bootstrap 等現有框架的基礎上再構建一層。

不過最後還請注意：

Abstract layer can solve many problems, except problem of having too many abstract layers.