为什么使用响应式
移动设备在打开页面时，浏览器为了能将整个页面宽度的内容都显示，默认会将页面进行缩小，导致内容过小。用户体验极差。
如果一个网站要同时兼顾pc端页面和移动端页面，有三种方式：
1.PC端页面和移动端页面分别设计开发，在服务器接受请求时，判断请求设备的类型，根据不同的类型返回不同的页面。
2.自适应的方案：自适应是在不同大小和分辨率的设备上呈现同样的网页。也就是说，网页内容和布局完全一样，不同的只是内容的尺寸。是按百分比做宽度布局。宽度使用百分比，文字使用em或rem。缺点：如果设备太小，就算网页能够根据屏幕大小进行适配，但是在太小屏幕显示内容过多会看不清楚，从而极大损害用户体验。
3.响应式页面布局：网页内容和布局随着屏幕尺寸变化而变化。对于同一个页面，如果用响应式布局来处理的话，用不同设备去访问此页面，最后看到的布局和内容有很大不同。
响应式的实现
1.在网页代码的头部，加入viewport meta标签。
则需要viewport视口设置，告诉浏览器不必再缩小页面，同时也告诉页面当前设备宽度，让页面（视口）和设备宽度等宽：
<meta name="viewport" content="width=device-width, initial-scale=1.0,userscalable=no">e
标签的相关属性：
width=device-width：让页面的宽度（视口）等于设备宽度。width也可以指定一个具体值。
height：与width相对应，指定高度。
initial-scale：设置初始缩放比例，当页面第一次load的时候的缩放比例。为1时不缩小也不放大。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放。user-csalable=no用户不能手动缩放。
2.允许网页宽度自动调整。
3.尽量少使用绝对宽度。
不要使用像素宽度，通过指定百分比宽度或者rem，em来替代，同时还可以配合css的cal，进行计算宽度。
4.相对大小的字体。
字体不要使用px写死，最好使用相对大小的em或者rem。
5.使用相对单位
1）vw是相对于视口的宽度。视口被均分为100单位的vw。
2）vh与vw相似，相对于浏览器视窗高度。
3）em是相对于使用em单位的那个元素的字体大小。
是em值乘以使用em单位的元素的字体大小。有一个比较普遍的误解，认为 em 单位是相对于父元素的字体大小。 事实上它们是相对于使用em单位的元素的字体大小。父元素的字体大小可以影响 em 值，是因为每个元素将自动继承其父元素的字体大小。继承效果只能被明确的字体单位覆盖，比如px,vw。 因此，以 em 为单位的元素字体大小可能会受到其任何父元素的字体大小影响。
4）rem表示相对于根元素（html）的字体大小。
rem 单位翻译为像素值是由 html 元素的字体大小决定的，例如根元素的字体大小 16px，10rem 将等同于 160px。此字体大小会被浏览器中字体大小的设置影响，默认情况下浏览器通常字体大小 16px，根 html 元素将继承浏览器中设置的字体大小，除非显式设置固定值去覆盖。当 em 单位设置在 html 元素上时，它将转换为em值乘以浏览器字体大小的设置。例如，如果网站的 html 元素的字体设置为 1.25em，如果浏览器字体大小被设置为 16px，那么根字体大小会为 20px，即 1.25 x 16 =20px。
rem 单位的优秀不仅仅是他们提供一致尺寸而不是继承，还有它给我们的一个途经去获取用户的偏好来影响网站中每一处使用rem的元素大小，不再是使用固定的 px 单位。为此，使用 rem 单位的主要目的应该是确保无论用户如何设置自己的浏览器，我们的布局都能调整到合适大小。因此给html元素设置一个固定的px单位这种很普遍的做法，剥削了用户自行调整以获得最佳视觉效果的能力。如果确实需要更改 html 元素的字体大小，那么就使用em，rem单位，这样根元素的值还会是用户浏览器字体大小的乘积。
使用rem单位，除非你确定你需要 em 单位，偶尔也会使用em单位允许保持在一个特定的设计元素范围内的可扩展性。因为em单位取决于一个font-size值而非 html 元素的字体大小。
6.流式布局
float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。
7.@media媒体查询
@media 可以针对不同的屏幕尺寸设置不同的样式。
使用方式
mediatype:媒体类型。media feature: 媒体功能。
1.外联样式：
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css"> <!-- 实例 --> <link rel="stylesheet" href="index.css" media="only screen and (max-640px)">
2.内嵌样式：
@media mediatype and|not|only (media feature) { CSS-Code; } /*实例*/ @media screen and (min-640px){ body{ background-color: orange; } }
设备宽高：device-width,device-height;
渲染窗口的宽高：width,height;
手持方向：orientation
设备分辨率：resolution
8.图片
图片和背景也要响应式的调整大小。
1）img标签里的图片：width 属性设置为 100%，图片会根据上下范围实现响应式功能。但是可能会比原始尺寸大，造成图片变形。可以利用max-width 属性解决这个问题。max-width 属性设置为 100%, 图片永远不会大于其原始大小。实现图片的自动缩放。这只要一行CSS代码：
img { max- 100%;}
但最好还是根据不同大小的屏幕，加载不同分辨率的图片。
2）背景图片：
1. 如果 background-size 属性设置为 "100% 100%" ，背景图片将延展覆盖整个区域。
2. 如果 background-size 属性设置为 "contain", 高度撑满，图片保持其比例不变，按比例自适应内容区域。
3. 如果 background-size 属性设置为"cover"，宽度撑满，图片保持其比例不变，按比例自适应内容区域。
4.有时候，我们没有必要在小屏幕上去加载大图片，这样很影响加载速度。可以使用媒体查询，根据不同的设备显示不同的图片。
9.bootstrap
Bootstrap 是响应式 Web 设计的框架。
引用
使用bootstrap至少要引入三个文件，bootstrap.css，jquery.js，bootstrap.js，两个js文件的导入有先后顺序。
栅格系统
1. bootstrap 中有两种容器，分别是 container 和 container-fluid 。这两种容器中可以使用栅格系统进行横向布局。
2. 在栅格系统中，一个容器纵向被分为12列，容器中的元素可以设置class标明自己占多少列。任何一个元素都可以再次作为容器，使用栅格系统，栅格系统可以嵌套。
3. 栅格系统将屏幕尺寸分为4个等级，lg,md,sm,xs。
lg：大于等于1200px; md:大于等于992px；sm:大于等于768px; xs:小于768px;
栗子：col-lg-3 表示本元素在大屏幕下占3列。
<main class="container">
<div class="box col-lg-3 col-md-4 col-sm-6"></div>
<div class="box col-lg-3 col-md-4 col-sm-6"></div>
<div class="box col-lg-3 col-md-4 col-sm-6"></div>
<div class="box col-lg-6 col-md-4 col-sm-6"></div>
<div class="box col-lg-6 col-md-12 col-sm-6 container">
<div class="lit box col-lg-3 col-md-4 col-sm-6"></div>
<div class="lit box col-lg-3 col-md-4 col-sm-6"></div>
<div class="lit box col-lg-3 col-md-4 col-sm-6"></div>
<div class="lit box col-lg-3 col-md-4 col-sm-6"></div>
</div>
</main>