PC端自适应布局

Posted 2020-10-25 苏二小姐

截止目前，国内绝大多数内容为主的网站（知乎，果壳，V2EX，网易新闻等）均使用内容区定宽布局，大多数电商网站（网易考拉，京东，聚美优品）也使用了内容区定宽的布局，也有些网站使用了自适应布局：

1. 天猫 
   
   • 内容区采用媒体查询+定宽，在达到某个断点之后更改内容区的宽度，并把某个内容显示/隐藏。
   • 注意热门市场这里，虽然每一个方块的宽度是随着断点变化的，但是左上角的标签和里面长方形的白色区域在所有的屏幕下都是定宽度的，但是也可以完美的适应不同的屏幕；
2. 淘宝 
   
   • 内容区也是采用了媒体查询+定宽；
   • 达到某个节点之后隐藏某些元素：

宽屏： 

窄屏: 

1. 微博 
   
   • 页面主体定宽，当小于1007的时候，把侧边栏隐藏，内容区本身是定宽。
2. 亚马逊 
   
   • 很多宽度和高度是js动态计算赋值。

总结(什么时候做响应式，怎么做响应式)

• 目前看来，内容为主的社区网站或者电商网站使用自适应布局的并不多，仅有的几个也没有做大范围的自适应布局，一般是使用媒体查询在几个断点（不超过三个，微博这样的只设置了一个断点）做响应式进行布局微调。

• 内容为主（大量文字，少量图片）的网站不适合做响应式布局，大量图片少量文字的网站比较适合做响应式布局（比如花瓣，airbnb）。是否做响应式和用户体验没有必然关系。

• 如果要做PC端自适应布局，尽量控制变化的范围，只有在不得已的情况下才进行布局的微调，不要对页面中太多的地方做响应式（尤其是字体随着页面的宽度而变化），因为可以变化的地方越多，不仅成倍增加设计和前端的工作量，而且对页面的风格也更加难以把握，容易出力不讨好，目前市面上页面有这样做的网站，应该极力避免！

• 在设计前期，由前端和设计共同确定断点。

• 最优先适配最常见的分辨率，比如1366,1920，1440（如果包括mac air或者其他apple设备和分辨率）

• 确定好由小屏一直兼容到大屏，还是有大屏一直兼容到小屏幕（这个就是设计那边确定了）

• 如果做单页展示（比如卧龙和选品），还要考虑高度的限制，考虑最小的高度情况下的设计(这个在设计阶段需要考虑更多！)。 PS： 内容比较多，兼容性要求高的网站不适合使用单屏展示，如果要用的话，考虑好最小的适配分辨率，尤其是最小的高度。