响应式布局分类

响应式设计中常用的三种布局模式。

    缩放、流式布局与响应式

缩放布局，旨在相对缩放每一个元素。它们会随着窗口大小变化动态缩放内容，就这方面而言，它们是响应式的。布局本身保持静止，通过改变每一个元素来保持一致的表现。

流式布局就不一样，因为它们随着窗口尺寸缩放容器元素。通过em这类相对单位可以做到这点，克服了缩小文字的问题。用户主动缩放时，设计就被破坏了。

响应式设计不会缩放任何东西。相反，它会根据窗口尺寸决定显示哪些内容。

响应式布局以让网站同时适配不同分辨率的屏幕，让客户有更好的体验。一共有以下五种方法实现响应式布局：
　　１.百分比布局。
　　2.媒体查询布局。
　　3.rem响应式布局。
　　4.vw响应式布局。
　　5.flex弹性布局。
1.百分比布局：
　　百分比布局很简单，就是对盒子的属性设置百分比来适配不同的屏幕。
２.媒体查询布局：
　　媒体查询就是对不同分辨率的屏幕编写不同的css样式，来达到适配的目的。媒体查询相对于百分比布局，可以对布局进行更细致的调整，但需要在每个分辨率下面都写一套css样式；分辨率拆分可视项目具体情况而定。
　　具体使用步骤，请移步到我的博客https://blog.csdn.net/weixin_45369499/article/details/100652312进行学习。
３.rem响应式布局：
　　当前页面中元素的rem单位的样式值都是针对于html元素的font-size的值进行动态计算的，所以有两种方法可以达到适配不同屏幕：
　　第一种利用媒体查询，在不同分辨率下给html的font-size赋值。

４.vw响应式布局：
　　根据PSD文件宽度或高度作为标准，元素单位px转换为vw或vh，比如font-size: 12px，PSD文件宽度375，转换公式12 * 100 / 375，则样式改为font-size: 3.2vw。
　　现阶段手机端用的最多就是这个方法，能保持不同屏幕下元素显示效果一致，也不用写多套样式。
５.flex弹性布局：
　　利用flex属性来适配不同屏幕。flex布局是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。