响应式简介
无论你的屏幕多大,小一点的屏幕(手机)可以一行行的排列,中等一点的屏幕(平板电脑)可以两列三列的那么排布,更大的屏幕(PC电脑)则可以展示更多的列,因为电脑屏幕的宽高比恰巧与手机相反嘛(宽比高大)。
响应式布局通常分为三种:
一种是利用弹性盒子Flex、网格布局Grid或左浮动法Float等 CSS 来实现的在一列上根据屏幕大小的不同而进行换行。
另一种是利用媒体来根据当前屏幕大小来运行相应的 CSS 。
还有一种是利用 JavaScript 来窗口宽高来动态操作 DOM 元素。
本章我们将重点讲解前两种,因为《移动端布局》这门课是从《CSS 布局》这门课程中拆分出来的,所以能不用 JavaScript 就尽量不用 JavaScript。
由于渐隐渐现那两小节必须要到屏幕滚动的位置才可以做得到
而且不想让同学们错过比较常见的这么一种需求
所以才不得已的用到了一点点的 JavaScript
响应式布局非常适合那种想要在各种不同设备上都能够流畅的网站。
响应式的使命就是:一套 四处运行