响应式简介

1. 前言

响应式就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本，这个概念是为解决移动互联网浏览而诞生的。

无论你的屏幕多大，小一点的屏幕(手机)可以一行行的排列，中等一点的屏幕(平板电脑)可以两列三列的那么排布，更大的屏幕(PC电脑)则可以展示更多的列，因为电脑屏幕的宽高比恰巧与手机相反嘛(宽比高大)。

2. 响应式布局

响应式布局通常分为三种：

• 一种是利用弹性盒子Flex、网格布局Grid或左浮动法Float等 CSS 属性来实现的在一列上根据屏幕大小的不同而进行自动换行。

• 另一种是利用媒体查询来根据当前屏幕大小来运行相应的 CSS 代码。

• 还有一种是利用 JavaScript 来获取窗口宽高来动态操作 DOM 元素。

本章我们将重点讲解前两种，因为《移动端布局》这门课是从《CSS 布局》这门课程中拆分出来的，所以能不用 JavaScript 就尽量不用 JavaScript。

由于渐隐渐现那两小节必须要获取到屏幕滚动的位置才可以做得到
而且不想让同学们错过比较常见的这么一种需求
所以才不得已的用到了一点点的 JavaScript

3. 小结

响应式布局非常适合那种想要在各种不同设备上都能够流畅显示的网站。

响应式的使命就是：一套代码 四处运行