前端-关于布局-响应式布局

pc端响应式布局
1.element头中尾布局容器+弹性布局 + px
2.百分比布局====大块布局进行百分比设置
3.bootstrap响应式布局
https://jingyan.baidu.com/article/48b37f8de8ef6f1a64648816.html
4.element 响应式布局+百分比或者vw或者rem
https://jingyan.baidu.com/article/2c8c281d04ad044009252a66.html
https://www.jianshu.com/p/28ac9a07749e

响应式布局可以让网站同时适配不同分辨率和不同的手机端，建议PC端和手机端设计两套，体验感会更好
https://blog.csdn.net/Embrace__/article/details/97639368
布局方式
1.百分比布局
2.媒体查询布局
3.rem响应式布局
4.vw响应式布局
5.flex弹性布局

百分比布局==用的最多就是对图片和大块布局进行百分比设置
顶部是利用设置图片width: 50%来适应不同的分辨率，由于原始图片高度不同，所以第一张图片顶部会有空白，这种情况最好两张图片宽高保持一致，如果使用强制高度统一，会导致图片变形；

注意：当屏幕大于图片的宽度时，会进行拉伸；解决拉伸方法就是改为max-width: 50%，但当屏幕大于图片的宽度时，两边会有空白。

栏目是利用设置单栏目width: 25%来适应不同的分辨率。

由于没办法对font-size进行百分比设置，所以用的最多就是对图片和大块布局进行百分比设置

利用媒体查询设置不同分辨率下的css样式，来适配不同屏幕
媒体查询相对于百分比布局，可以对布局进行更细致的调整，但需要在每个分辨率下面都写一套css样式；分辨率拆分可视项目具体情况而定。

注意：IE6、7、8不支持媒体查询。

rem响应式布局
当前页面中元素的rem单位的样式值都是针对于html元素的font-size的值进行动态计算的，所以有两种方法可以达到适配不同屏幕：

第一种利用媒体查询，在不同分辨率下给html的font-size赋值。

第二种利用js动态计算赋值，详细代码如下图
缺点就是打开页面时候，元素大小会有一个变化过程。

vw响应式布局
根据PSD文件宽度或高度作为标准，元素单位px转换为vw或vh，比如font-size: 12px，PSD文件宽度375，转换公式12 * 100 / 375，则样式改为font-size: 3.2vw，下面是我经常使用的工具，有利于提高转换效率。

现阶段手机端用的最多就是这个方法，能保持不同屏幕下元素显示效果一致，也不用写多套样式

flex弹性布局
利用flex属性来适配不同屏幕，下图利用简单的属性实现栏目响应式；详细属性可参考教程