关键词：
截止目前，国内绝大多数内容为主的网站（知乎，果壳，V2EX，网易新闻等）均使用内容区定宽布局，大多数电商网站（网易考拉，京东，聚美优品）也使用了内容区定宽的布局，也有些网站使用了自适应布局。
如果不明白响应式布局和自适应布局的可以去我的博客看《自适应布局和响应式布局的不同》。
1.天猫
1.内容区采用媒体查询+定宽，在达到某个断电之后改变内容区的宽度，并把某个内容进行隐藏/显示。
2.注意热门市场这里，虽然每一个方块的宽度是随着断点变化的，但是左上角的标签和里面长方形的白色区域在所有的屏幕下都是定宽度的，但是也可以完美的适应不同的屏幕。
2.淘宝
1.内容区也是采用了媒体查询+定宽。
2.达到某个节点后隐藏某些元素。
宽屏：
窄屏：
1.微博
1.页面主体是定宽的，当小于1007的时候，把侧边栏隐藏，内容区本身是定宽。
2.亚马逊
1.很多高度和宽度是js动态计算赋值。
总结（什么时候做响应式，怎么做响应式）
目前看来，内容区为主的社区网站或者电商网站使用自适应布局的并不多，仅有的几个也没有做大范围的自适应布局，一般是使用媒体查询在几个断点（不超过3个，微博这样的也只是设置了一个断点）做响应式进行布局微调。
内容为主（大量文字，少量图片）的网站不适合做响应式布局，大量图片少量文字的网站比较适合做响应式布局（比如花瓣，airbnb）。是否做响应式和用户体验没有必然的关系。
-
如果要做PC端自适应布局，尽量控制变化的范围，只有在不得已的情况下才进行布局的微调，不要对页面中太多的地方做响应式（尤其是字体随着页面的宽度而变化），因为可以变化的地方越多，不仅成倍增加设计和前端的工作量，而且对页面的风格也更加难以把握，容易出力不讨好，目前市面上页面有这样做的网站，应该极力避免！
-
在设计前期，由前端和设计共同确定断点。
-
最优先适配最常见的分辨率，比如1366,1920，1440（如果包括mac air或者其他apple设备和分辨率）
-
确定好由小屏一直兼容到大屏，还是有大屏一直兼容到小屏幕（这个就是设计那边确定了）
-
如果做单页展示（比如卧龙和选品），还要考虑高度的限制，考虑最小的高度情况下的设计(这个在设计阶段需要考虑更多！)。 PS： 内容比较多，兼容性要求高的网站不适合使用单屏展示，如果要用的话，考虑好最小的适配分辨率，尤其是最小的高度。
响应式布局
响应式布局响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就够，缺点就是css写的比较多。响应式设计与自适应设计的区别：响... 查看详情
响应性- 如何使用 CSS 控制 PC 显示的比例和布局？
】响应性-如何使用CSS控制PC显示的比例和布局？【英文标题】：Responsiveness-HowtocontrolPCdisplay\'sscaleandlayoutwithCSS?【发布时间】：2019-05-1917:31:52【问题描述】：到目前为止，当我尝试创建响应式网站时，我一直使用媒体查询来控制... 查看详情
移动端和pc端，响应式设计布局
1.什么是响应式Web设计?响应式Web设计让你的网页能在所有设备上有好显示。响应式Web设计只使用HTML和CSS。响应式Web设计不是一个程序或Javascript脚本。2.响应式的作用：设计最好的用户体验 友好的用户体验是网页可以在任何... 查看详情
第33章项目实战-兼容式响应布局1
第33章项目实战-兼容响应式布局[1]学习要点：1.响应式初探2.起始部分本章主要开始如果将前两个项目再进行重构，设计成既可以在PC端正常显示，又可以在PAD上浏览，还可以在移动端有良好的体验。这些都必须兼容，那只有使用... 查看详情
响应式布局(代码片段)
响应式布局市场约定的适配手机、平板、pc设备档位划分：三个节点，四个档位 超小屏手机：xs<768px小屏平板：768px≤sm＜992px中屏pc电脑屏：992px≤ md＜1200px大屏pc：1200px≤ lg＜1920px （element-ui... 查看详情
六、pc端全局响应式布局
参考技术A根据分辨率720到1080或者根据窗口尺寸两个方法room和transform：scale(x,y)对px有效，对rem无效由于resize事件可以以较高的速率触发,因此事件处理程序不应该执行计算开销很大的操作MDN推荐三种resize方法整体放大缩小，像图... 查看详情
浅析响应式布局，rem布局,媒体查询布局(代码片段)
响应式什么是响应式布局响应式布局（respondlayout）是EthanMarcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端（手机、平板、pc电脑、手表，电视）——而不是为每个终端做一个特定的版本。这个概念... 查看详情
第33章项目实战-兼容式响应布局2
第33章项目实战-兼容响应式布局[2]学习要点：1.搜索响应式2.底部响应式本章主要开始如果将前两个项目再进行重构，设计成既可以在PC端正常显示，又可以在PAD上浏览，还可以在移动端有良好的体验。这些都必须兼容，那只有使... 查看详情
关于静态布局自适应布局流式布局响应式布局弹性布局的一些概念
一、静态布局（StaticLayout）即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。1、布局特点：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局... 查看详情
布局的几种方式（静态布局自适应布局流式布局响应式布局弹性布局）
一、静态布局（staticlayout） 即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。1、布局特点 不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布... 查看详情
静态布局自适应布局流式布局响应式布局弹性布局等的概念和区别
一、静态布局（StaticLayout）即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。1、布局特点：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，... 查看详情
响应式
css响应式布局{手机（app）、平板pc、（桌面、电脑）}国外（自适应响应式布局）中国（手机和电脑两种） @midle媒体查询，通过改变屏幕尺寸screen（宽度width）来达到页面的自适应采用继承的width（100%）的方式em是相对长度单... 查看详情
第33章项目实战-兼容式响应布局3
第33章项目实战-兼容响应式布局[3]学习要点：1.标题响应式2.图片响应式本章主要开始如果将前两个项目再进行重构，设计成既可以在PC端正常显示，又可以在PAD上浏览，还可以在移动端有良好的体验。这些都必须兼容，那只有使... 查看详情
关于响应式布局
...着互联网的快速发展，以及html5+css3的迅速崛起。渐渐的响应式布局，也会慢慢的出现在我们的视野里，身为专业的web前端人员，还不学习新技术你就out啦！为什么这样说呢？因为响应式布局能同时兼容多个终端，比如（手机、... 查看详情
关于响应式布局
...着互联网的快速发展，以及html5+css3的迅速崛起。渐渐的响应式布局，也会慢慢的出现在我们的视野里，身为专业的web前端人员，还不学习新技术你就out啦！为什么这样说呢？因为响应式布局能同时兼容多个终端，比如（手机、... 查看详情
响应式布局
...能使页面自适应显示在不同大小终端设备上的页面。2、响应式布局：一个网站能够兼容多个终端，而不是为每个终端都做一个特定的版本，实现响应式布局的方法：bootstrap和CSS原生代码两种方法。3、CSS原生代码是通过@Media媒体... 查看详情
响应式布局-pc端和移动端同时适配
参考技术A第二种rem响应式布局方案(等比缩放)：使用的时候按照1920的设计稿来做。100px=1rem，font-size设置成100px;750px的设计稿1rem=100px设置屏幕超过2560及以上，就固定1rem=200px，宽度小于600及以下，就固定1rem=32px第三方库用的一般... 查看详情
响应式布局
概念响应式布局，就是响应式设计方案的呈现。具体点就是在不同的设备上，网页能自动识别屏幕宽度、并根据设备的显示面积（一般情况下是指的屏幕宽度，当然，也可以是其他的，可以在下面详细解释）显示出不同的效果。... 查看详情