什么是响应式布局
响应式布局设计，是指将桌面设备上的网页内容在移动设备上进行优化排版，使用户能够在移动设备上更方便地阅读并操作。其实，如果经常使用不同的设备浏览互联网网页，就会比较容易体会响应式布局设计在移动设备上的应用。
页面的设计根据使用设备环境进行相应的响应和调整，具体的实践方式由多方面组成的。最主要的是三种技术实现的：
1、流体布局，采用了百分比和像素为单位，使布局更加灵活。布局上才用多种方法，呈现不同方式的实现布局设计，简单分为四种类型：固定布局、可切换的固定布局、弹性布局、混合布局。
其次，可切换的固定布局的实现成本最低，但拓展性比较差；而弹性布局与混合布局效果具响应性，都是比较理想的响应式布局实现方式。只是对于不同类型的页面排版布局实现响应式设计，需要采用不用的实现方式。通栏、等分结构的适合采用弹性布局方式、而对于非等分的多栏结构往往需要采用混合布局的实现方式。
2、媒介查询，通过使用媒介查询，可以获取到设备及设备的特性，及时的响应布局方案，从而解决之前在单纯的布局设计中遗留的问题。
3、弹性图片，伴随布局的弹性，图片作为信息重要的形式之一也必须有更灵活的方式去适应布局的变化。扩大研究范围：除了图片，还应该包括图标、图表、视频等信息内容的响应方式。
布局响应是对页面进行设计，需要对相同的内容进行不同的布局设计。一种是桌面向下设计，一种是移动端向上的设计。无论那种设计，都要兼容所有的设备。
随着大屏幕移动设备的普及，随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。给我们提供了更加舒适的界面体验。
什么是响应式是什么
响应式布局响应式布局，是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。
优点响应式布局：
1、用户体验友好
响应式网站可以根据不同终端、不同尺寸和不同应用环境响应式布局，自动调整界面布局、展示内容、内容大小，提供非常好视觉展示效果，一致性友好体验。
2、节省设计与开发时间
响应式网站界面只需要设计两套设计效果图，后期维护不需要分别维护pc界面、pad界面、移动界面，专心维护一个网站即可。
3、SEO友好
由于响应网站在不同终端有友好的界面展示效果，用户可以与网站一直保持联系，比如URL不变积累分享。
4、可以适应所有设备屏幕
拥有响应式布局了响应式的网站设计则不同，用户可以一直和网站保持联系，而且它对用户非常用好。
扩展资料响应式布局：
响应式布局的缺点
1、设计与风格有局限性
自由度太低，局限性较大。
2、对IE老板兼容性不友好
对于老版本IE（IE6、IE7、IE8）支持不好。
3、灵活性有所欠缺
基于不同终端的设备属性不同，对产品用户体验要求就会截然不同。内容比较多带有功能性的网站不适合做响应式网站设计。
参考资料来源：百度百科—响应式布局
响应式布局流式布局
响应式布局：根据不同的尺寸适配
viewport
width=device-width 设置视口的宽度等于设备的宽度，如果不设置的话，默认视口的宽度是980px
通俗理解：我们这个操作其实展示当前这个页面一共有多宽（浏览器的宽度）
高清屏幕：苹果手机是二倍高清屏幕，也就是我们在手机上看到的那张100 100的图片，其实苹果手机是按照200 200的尺寸进行渲染的，
如果真实图片是100 100，最后呈现出来的就是被拉伸后边模糊的效果
苹果手机上需要的素材图片都需要比看到的尺寸大一倍才可以，安卓不用
DPI适配思想:我们在做页面的时候，最好每一张图片都准备两套或三套比如：
logo.png 100 100
响应式布局的解决方案：流式布局法
1、容器或者盒子的宽度一般都不写固定的值，而是使用百分比（相对于视口区域的百分比）
其余的样式：字体、高度、margin、padding都按照设计稿上标注尺寸的一半来设置
对于有些屏幕尺寸下我们设置的固定值看起来不是特别好看的话我们使用@media微调
在真实项目中，设计师给我们的设计稿一般是 640 960 640 1136 750*1334
常用的手机尺寸：5s一下都是320px 6是375px 6plus是414px的宽度
常用的安卓手机尺寸：320、360、480、540、640、720
特殊情况，设计师的设计稿是640px 我们的素材图也是640px的，这样的话在iphone6/iphone6 plus展示的时候，图片不够大，这种情况下我们需要单独找设计师要一张更大的图
开始项目之前的准备
移动端样式重置
静态、自适应、流式、响应式四种网页布局有什么区别？
1、灵活性不同：
静态布局：毫无灵活性可言响应式布局，目前已逐渐被淘汰。
自适应布局：静态布局的升级版响应式布局，因其强大的灵活性响应式布局，已逐渐成为高端网页的代名词。
流式布局：灵活性更高，可适用于其响应式布局他三种网站布局。
响应式布局：自适应布局的升级版，响应式网站要普遍适应市面上各类屏幕，开发难度和工作量都是非常大的，开发价格自然比普通网站高。
2、设计方法不同：
静态布局：居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分。
自适应布局：使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。
流式布局：使用百分比定义宽度，高度大都是用px来固定，可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。
响应式布局：媒体查询+流式布局。使用@media媒体查询和网格系统配合相对布局单位进行布局，就是综合响应式、流动等上述技术通过 CSS 给单一网页不同设备返回不同样式的技术统称。
扩展资料：
静态、自适应、流式、响应式四种网页布局的特点概括
1、静态布局：即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。
2、流式布局：页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。这就导致如果屏幕太大或者太小都会导致元素无法正常显示。
3、自适应布局：分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。
4、响应式布局：分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。
什么是响应式布局 响应式布局的解释
1、响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
2、响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着大屏幕移动设备的普及，用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。
