PC端自适应布局
截止目前,国内绝大多数内容为主的网站(知乎,果壳,V2EX,网易新闻等)均使用内容区定宽布局,大多数电商网站(网易考拉,京东,聚美优品)也使用了内容区定宽的布局,也有些网站使用了自适应布局: 该篇文章为转载,更多文章见我的个人博客: http://cherryblog.site/ 天猫 内容区采用媒体查询+定宽,在达到某个断点之后更改内容区的宽度,并把某个内容显示/隐藏。 注意热门市场这里,虽然每一个方块的宽度是随着断点变化的,但是左上角的标签和里面长方形的白色区域在所有的屏幕下都是定宽度的,但是也可以完美的适应不同的屏幕; 淘宝 内容区也是采用了媒体查询+定宽; 达到某个节点之后隐藏某些元素: 宽屏: 窄屏: 微博 页面主体定宽,当小于1007的时候,把侧边栏隐藏,内容区本身是定宽。 亚马逊 很多宽度和高度是js动态计算赋值。 总结(什么时候做响应式,怎么做响应式) 目前看来,内容为主的社区网站或者电商网站使用自适应布局的并不多,仅有的几个也没有做大范围的自适应布局,一般是使用媒体查询在几个断点(不超过三个,微博这样的只设置了一个断点)做响应式进行布局微调。 内容为主(大量文字,少量图片)的网站不适合做响应式布局,大量图片少量文字的网站比较适合做响应式布局(比如花瓣,airbnb)。是否做响应式和用户体验没有必然关系。 如果要做PC端自适应布局,尽量控制变化的范围