PC端自適應布局

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

1. 天貓 
   
   • 內容區采用媒體查詢+定寬，在達到某個斷點之后更改內容區的寬度，並把某個內容顯示/隱藏。
   • 注意熱門市場這里，雖然每一個方塊的寬度是隨着斷點變化的，但是左上角的標簽和里面長方形的白色區域在所有的屏幕下都是定寬度的，但是也可以完美的適應不同的屏幕；
2. 淘寶 
   
   • 內容區也是采用了媒體查詢+定寬；
   • 達到某個節點之后隱藏某些元素：

寬屏： 

窄屏: 

1. 微博 
   
   • 頁面主體定寬，當小於1007的時候，把側邊欄隱藏，內容區本身是定寬。
2. 亞馬遜 
   
   • 很多寬度和高度是js動態計算賦值。

總結(什么時候做響應式，怎么做響應式)

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

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

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

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

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

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

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