响应式布局的实现方法

响应式布局可以让网站同时适配不同分辨率的屏幕，让客户有更好的体验。一共有以下五种方法实现响应式布局：
　　１.百分比布局。
　　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赋值。
　　第二种利用js动态计算赋值。
　　具体使用步骤，请移步到我的博客https://blog.csdn.net/weixin_45369499/article/details/100652926进行学习。
４.vw响应式布局：
　　根据PSD文件宽度或高度作为标准，元素单位px转换为vw或vh，比如font-size: 12px，PSD文件宽度375，转换公式12 * 100 / 375，则样式改为font-size: 3.2vw。
　　现阶段手机端用的最多就是这个方法，能保持不同屏幕下元素显示效果一致，也不用写多套样式。
５.flex弹性布局：
　　利用flex属性来适配不同屏幕。flex布局是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
　　具体使用步骤，请移步到我的博客https://blog.csdn.net/weixin_45369499/article/details/102851931进行学习。