國內優秀的響應式WEB網站有哪些？

01-14

請答題者注意響應式設計的定義
什麼是響應式布局設計？

之前的幾位回答都不準確，看來知道響應式的人真的很少。

目前（2013.7），支付寶、天貓都不是響應式設計，國內還沒有一個完整的響應式網站。

在今年2月，我們對3g門戶的時尚頻道（http://fashion.3g.cn）進行了響應式改造，這個頻道的首頁和內容頁以及部分專題，都是響應式的，但還談不上全站完成了響應式改造。

在改造過程中，我們發現，響應式並非media-query那麼簡單，但它確實是目前唯一一個成熟可用的HTML5 API。

對工程師有美學要求，對設計師有工程要求，需要有跨學科綜合工程能力的人。但在國內，ui設計師和前端工程師，往往不在一個團隊中，所以我說響應式首先是一個政治問題。

國外有一些響應式網站，比如http://times.com和http://thenextweb.com，但我們認為也只是視覺響應式，還沒有同步做到交互的響應式和圖片的響應式。

讓國內的GPRS用戶去看這2個網站，流量成本和速度都是問題。

我們知道，吃螃蟹的人總會死得很慘，也很清楚，大公司里很多人也已經注意到了這個趨勢。不過我們還是決定謹慎地先行一步，事實我們已經完成了多套響應式的網站模版，積累了一些經驗和教訓。

在這個過程中，我們發現響應式不僅僅適用於網站，也許更適用於Webapp，用Phonegap封裝RWD後的簡易Hybird-App會是一種避免了App最頭大的解析度問題的敏捷的開發模式。

2013年11月，http://3g.cn的首頁已經完成了響應式改造——由於一些不可控原因，我們通過判斷UA，目前僅允許Pad和魅族MX3訪問我們的新版，剩餘的用戶，會分散到WML和Basic-HTML版本去。

（懂技術的你，一定知道如何通過使用Chrome來模擬iPad，再簡單一些，就是用手機版QQ瀏覽器的iPad模式來瀏覽我們的網站。）

一年的響應式商業實踐下來，我的結論就一句：

響應式並不適合所有人，但應該是多設備多屏幕時代的明確趨勢。

我們並不孤單，etao的首頁（http://etao.com）和新浪的時尚頻道首頁（http://fashion.sina.com.cn）也完成了響應式改造。至於我了解到的一些同行，目前的狀況就2類：要麼正在做，要麼歷史負擔太重單單靠前端團隊推動不了。

最後，我們還在一些相對小型的項目上，全站使用了響應式設計：

24格

安卓中國-國內知名安卓系統手機交流社區安卓軟體,安卓遊戲,安卓系統論壇

一秒回電！神牛V850鋰電閃光燈實測

竟然沒有人說知乎。。

我自己來補充幾個站點吧：

微軟中國官方網站：軟體，安全，下載，雲計算，信息化，培訓

大連網站建設|網站製作

華東師範大學::Ecnu.Edu.Cn -East China Normal University

http://www.passquan.cn/

i樓市下載_最好用的地圖找房移動APP應用

D21中國建築設計獎-China Architectural Design in 21st Century Award

桌面、手機、平板自適應頁面展示。

後續再更新

Media Queries 這是一個專門收錄響應式網站的網站，其實國外已經很流行了

http://coolsite360.com 國內最新出來一個做響應式網站的，還有交互功能和動畫，感覺不錯

只列出比較知名的，時間：2013/10/18。

國內：

http://www.etao.com/
http://www.tmall.com/
http://www.taobao.com/
http://www.36kr.com/
http://www.youku.com/
http://www.letv.com/
http://www.duokan.com/
http://baoz.me/
http://v3.bootcss.com/

國外：

https://plus.google.com/
http://news.google.com.hk/
http://www.microsoft.com/zh-cn/default.aspx
http://windows.microsoft.com/zh-cn/windows/home

綜合：

Media Queries
推薦！70個絕妙的響應式網站設計

學習：

http://isux.tencent.com/responsive-web-design.html
http://www.qianduan.net/responsive-web-design.html

工具：

chrome-extension://hdmihohhdcbejdkidbfijmfehjbnmifk/test/index.html （Chrome插件）
Demonstrating Responsive Design
The Responsinator

其實還有很多， and 未來會更多。

____________________

2014年5月12日補充，一些較大的網站只能算是半響應式。比如tmall,taobao，出於一些考慮（如成本，效果）並沒有完全的實現響應式，只考慮響應1024、1280（1366）及更寬的響應寬度。

據我所知3G門戶時尚頻道很早就上線了響應式網站，新浪怎麼有臉說自己是全球第一個時尚類響應式網站?不排除國外，在國內，3G門戶時尚頻道上線了響應式網站之後新浪跟其後上線的也是時尚頻道，讓人不由覺得「Hi~怎麼那麼巧」

知道很不錯的http://www.1ke.co

裡面還專門有教搭建響應式網站的課程

三星的網站也是響應式，很強大，比如中國三星電子。三星全球的大部分版本都改成響應式了。但是我覺得在手機上看感覺更舒服，拉寬後反而覺得排版有些凌亂。

wunderlist 網頁版

還有騰訊的webqq smart版本和上面的24格很類似

免費響應式建站http://www.wapadd.cn

微加免費H5建站系統，功能全免費，任意搭建、網頁DIY，只要你會點CS沒有做不出的效果。

國內可以做響應式建站的平台只有兩家：起飛頁（http://www.qifeiye.com），突唯阿（ www.tuweia.cn ），其餘什麼凡科、建站之星、微企點、上線了都是假響應式。

http://www.Joowp.com http://www.eee-eee.com http://www.joomlass.com都是不錯的響應式網站

是一個不錯的響應式網站佛山網站建設，想知道什麼是響應式網站請點擊《什麼是響應式網站？自適應網站和響應式網站有什麼區別？》

http://www.chengjunbang.com 可以參考這個網站呢！

響應式網站建設，有pc和手機都是同一內容，不同的設備，自動排版，有利於收錄和文章的管理，做響應式網站可以找我

http://bbshub.com BBS HUB-為您打造專屬論壇APP, 這個很贊。

從零基礎教你如何自己製作一個功能強大的完整響應式網站 (只需大概1小時)

怎樣製作一個完整的響應式網站? 只要你跟著這套WordPress 建站視頻教程一步步操作，就可以零基礎建立一個完整的網站 (一步步建站，一步也不少)。你不需要學習任何的代碼知識，如HTML, CSS, 或PHP來建立一個功能強大的響應式網站。

隨著網站技術的發展，建網站變得越來越簡單，一般的人不需要掌握任何網站技術都可以自己用Wordpress免費搭建平台(CMS)來建立的網站。還有，建立一個完整的，功能強大的網站也只需大概一個小時。

網站例子:
1) 用大概1小時做的網站: http://pro.jiuwp.com/

2) 用大概半小時做的網站: http://demo.jiustore.com/

如果不需要製作視頻教程，只需直接操作的話，可以更快地完成。

其實，創建一個網站 (企業網站，個人網站，公司網站)，購物網店，或獨立博客一點都不複雜，網站製作流程也十分的簡單，不懂建網站的步驟也沒關係！這些視頻教程可以讓您簡單、輕鬆快速學會！

建立完整響應式網站步驟:

第一步: 購買域名和空間，和安裝WordPress免費建站平台

你只需要跟著下面其中一個視頻教程一步步做就可以了，你的網站在大概10分鐘就可以上線。

到US Domain Center(美國域名中心): http://www.usdomaincenter.com/ 購買域名(網址)和空間(主機空間)

1) 可用支付寶, PayPal, 信用卡購買美國主機 (從購買域名, 空間, 安裝WordPress, 到網站上線只需10分鐘): https://www.jiustore.com/payment-methods/

或

2) 講解怎麼購買域名和空間, 並安裝WordPress (只需12分鐘):

讲解怎么购买域名和空间, 并安装WordPress (只需12分钟)

安裝WordPress後，你的網站就馬上上線了。你只要在手機，電腦，或平板電腦的網站輸入欄打進你的域名，你就可以看到你的網站。

第二步: 下載全套網站搭建視頻教程

教你如何製作一個完整的響應式網站 (WordPress 建站視頻教程) - 共72分鐘
下載頁面的鏈接: https://www.jiustore.com/guide/

如果你需要在互聯網銷售產品，你可以看看建立WordPress購物網站, 電子商務網站或外貿網站視頻 (WooCommerce 教程)
下載頁面的鏈接: https://www.jiustore.com/video/

最重要的是，自己建設一個網站，可以不斷豐富網站內容，不斷地開展推廣和運營，通過網站給你帶來持續不斷的收入，同時網站本身的價值也會越來越大。

視頻觀看介紹PDF文檔: http://pro.jiuwp.com/wp-content/uploads/2017/04/WordPress-Guide.pdf

以上的這些資料視頻教程都有教！希望對你有幫助。

JiNan University暨南大學

最好的前端hacking備忘錄--集錦 - SDK.CN - 中國領先的開發者服務平台

36氪 | 讓創業更簡單

http://www.cheerfulstudy.com/ 樂學網

http://www.immnn.com/ 100塊錢都不給我