截止目前，國內絕大多數內容為主的網站（知乎，果殼，V2EX，網易新聞等）均使用內容區定寬布局，大多數電商網站（網易考拉，京東，聚美優品）也使用了內容區定寬的布局，也有些網站使用了自適應布局。

如果不明白響應式布局和自適應布局的可以去我的博客看《自適應布局和響應式布局的不同》。

1.天貓

1.內容區采用媒體查詢+定寬，在達到某個斷電之後改變內容區的寬度，並把某個內容進行隱藏/顯示。

2.註意熱門市場這裏，雖然每一個方塊的寬度是隨著斷點變化的，但是左上角的標簽和裏面長方形的白色區域在所有的屏幕下都是定寬度的，但是也可以完美的適應不同的屏幕。

2.淘寶

1.內容區也是采用了媒體查詢+定寬。

2.達到某個節點後隱藏某些元素。

寬屏： 窄屏：

1.微博

1.頁面主體是定寬的，當小於1007的時候，把側邊欄隱藏，內容區本身是定寬。

2.亞馬遜

1.很多高度和寬度是js動態計算賦值。

總結（什麽時候做響應式，怎麽做響應式）

目前看來，內容區為主的社區網站或者電商網站使用自適應布局的並不多，僅有的幾個也沒有做大範圍的自適應布局，一般是使用媒體查詢在幾個斷點（不超過3個，微博這樣的也只是設置了一個斷點）做響應式進行布局微調。

內容為主（大量文字，少量圖片）的網站不適合做響應式布局，大量圖片少量文字的網站比較適合做響應式布局（比如花瓣，airbnb）。是否做響應式和用戶體驗沒有必然的關系。

• 如果要做PC端自適應布局，盡量控制變化的範圍，只有在不得已的情況下才進行布局的微調，不要對頁面中太多的地方做響應式（尤其是字體隨著頁面的寬度而變化），因為可以變化的地方越多，不僅成倍增加設計和前端的工作量，而且對頁面的風格也更加難以把握，容易出力不討好，目前市面上頁面有這樣做的網站，應該極力避免！

• 在設計前期，由前端和設計共同確定斷點。

• 最優先適配最常見的分辨率，比如1366,1920，1440（如果包括mac air或者其他apple設備和分辨率）

• 確定好由小屏一直兼容到大屏，還是有大屏一直兼容到小屏幕（這個就是設計那邊確定了）

• 如果做單頁展示（比如臥龍和選品），還要考慮高度的限制，考慮最小的高度情況下的設計(這個在設計階段需要考慮更多！)。 PS： 內容比較多，兼容性要求高的網站不適合使用單屏展示，如果要用的話，考慮好最小的適配分辨率，尤其是最小的高度。

PC響應式、固寬布局思想