什么是响应式布局？

响应式布局设计(Responsive layout design)是指在移动设备上对桌面设备上的网页进行优化布局，使用户在移动设备上更方便地阅读和操作。事实上，如果你经常使用不同的设备来浏览互联网页面，就会更容易理解响应式布局设计在移动设备中的应用。

页面设计要根据设备所处的环境做出反应和调整，具体的练习方式是由很多方面组成的。最重要的是通过三种技术实现的:

1.流体布局，使用百分比和像素作为单位，使布局更加灵活。布局设计有多种实现方式，可分为固定布局、可切换固定布局、灵活布局和混合布局四种。

其次，可切换固定布局的实现成本最低，但扩展性差；而柔性布局和混合布局是响应式的，是实现响应式布局的理想方式。只是对于不同类型的页面布局，响应式设计需要以不同的方式实现。灵活布置适用于所有的柱和等截面，但对于不具有等截面的多柱结构，往往需要混合布置。

2.媒体查询。通过使用媒体查询，我们可以获得设备及其特性，并及时响应布局方案，从而解决以往简单布局设计遗留的问题。

3.弹性图片。随着版面的灵活性，图片作为重要的信息形式之一，必须有更灵活的方式来适应版面的变化。扩大研究范围:除图片外，还应包括图标、图表、视频等信息内容的响应方式。

应对之策是设计页面，同样的内容需要不同的布局设计。一个是桌面向下设计，一个是移动向上设计。无论什么样的设计，都必须兼容所有设备。

随着大屏移动设备的普及，越来越多的设计师采用这项技术，我们不仅看到了很多创新，也看到了一些成型的图案。它为我们提供了更舒适的界面体验。

网站就必须用响应式布局吗？

你好不一定的，静态布局（Static Layout）

即传统Web设计，对于PC设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分；

对于移动设备，单独设计一个布局，使用不同的域名如wap.或m.。

自适应布局（Adaptive Layout）

自适应布局（Adaptive）的特点是分别为不同的屏幕分辨率定义布局。布局切换时页面元素发生改变，但在每个布局中，页面元素不随窗口大小的调整发生变化。

你可以把自适应布局看作是静态布局的一个系列。

流式布局（Liquid Layout）

流式布局（Liquid）的特点（也叫”Fluid”) 是页面元素的宽度按照屏幕进行适配调整，主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。

响应式布局（Responsive Layout）

分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。

可以把响应式布局看作是流式布局和自适应布局设计理念的融合。

恩恩大概就是这样。

HTML5常用的布局工具有哪些？

浮动布局，定位布局以及响应式布局，这三种布局是最基本最常见的，此外比较特殊的是弹性布局，弹性布局相对使用较少，需要根据项目的具体情况而定。在网站开发当中，通常是需要结合多种布局去实现网页布局的。如果是在学习网页布局的相关知识，可以弄本 HTML5布局之路 ，来辅助自己的学习

swiper如何设置响应式自适应？

当我们在做网页时，应当充分考虑到网页自适应的问题

否则可能会出现同一个网页在不同的屏幕尺寸上排版布局混乱的情况

方案一：用比例控制大小

在网页代码的头部，加入一行viewport元标签

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

以下是相关的属性的解释：

width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）

height：和 width 相对应，指定高度

initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例，1.0就是占网页的100%

maximum-scale：允许用户缩放到的最大比例

minimum-scale：允许用户缩放到的最小比例

user-scalable：用户是否可以手动缩放

用百分比去写元素的宽度，不要写绝对宽度

.myDiv {

width: 30%;

}

这里需要注意p宽度的计算方法，CSS盒式模型的宽度设置有两种模式：

width = 内容宽度

实际总宽度 = width + padding + border

这种情况下设置了 width 后，内容宽度不变，而调整 padding 和 border 都会使得p的实际总宽度变化

width = 实际总宽度

width = 内容宽度 + padding + border

这种情况下设置了 width 后，p总宽度不变

可以通过设置 css 的 box-sizing 属性来控制

content-box：width = 内容宽度 (默认)

border-box：width = 实际总宽度

让子元素撑起父元素的高度，而不要写绝对高度

.parent {

width: 30%;

}

.child {

width:100%;

height:100px;

}

**字体使用相对大小 “em” 或 “rem” **

h1 {

font-size: 2rem;

}

浏览器默认字体为 16px ，2rem 即 2 * 16px = 32px

em（font size of the element）是指相对于父元素的字体大小的单位，如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸，因此 em 的大小并不是固定的

rem（font size of the root element）是指相对于根元素的字体大小的单位

目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。

h1 {

font-size: 32px;

font-size: 2rem;

}

图片的大小也用百分比表示

img {

width: 100%;

}

也可以设置 max-width ，这样一来图片最大不会超过原始尺寸，避免图片由于放大而模糊

img {

max-width: 100%;

width: auto;

}

方案二：使用媒体查询 (CSS3 @media 查询)

当网页需要在移动端和PC端展示时，由于二者屏幕尺寸差别较大，可能需要用两种不同的布局才能更加友好地展示内容

此时可以使用媒体查询来检测屏幕(或浏览器窗口)的大小，然后采用相应的css样式来渲染页面

举个例子,当浏览器窗口小于 500px 时，背景变为蓝色：

@media only screen and (max-width: 500px) {

body {

background-color: lightblue;

}

}

bootstrap3插件是啥？

是最受欢迎的html,css,javascript框架，用于开发响应式布局，移动设备优先的web项目

什么是响应式网页布局？

就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本