响应式布局的五种实现⽅法
响应式布局可以让⽹站同时适配不同分辨率和不同的⼿机端，让客户有更好的体验。
⽅案⼀：百分⽐布局
利⽤对属性设置百分⽐来适配不同屏幕，注意这⾥的百分⽐是相对于⽗元素；能够设置的属性有 width、height、padding、margin，其他属性⽐如 border、font-size 不能⽤百分⽐设置的，先看⼀个简单例⼦：
顶部是利⽤设置图⽚ width: 50%来适应不同的分辨率，由于原始图⽚⾼度不同，所以第⼀张图⽚顶部会有空⽩，这种情况最好两张图⽚宽⾼保持⼀致，如果使⽤强制⾼度统⼀，会导致图⽚变形；
注意：当屏幕⼤于图⽚的宽度时，会进⾏拉伸；解决拉伸⽅法就是改为
max-width: 50%，但当屏幕⼤于图⽚的宽度时，两边会有空⽩。栏⽬是利⽤设置单栏⽬ width: 25%来适应不同的分辨率。
由于没办法对 font-size 进⾏百分⽐设置，所以⽤的最多就是对图⽚和⼤块布局进⾏百分⽐设置。
⽅案⼆：使⽤媒体查询 (CSS3 @media 查询)
利⽤媒体查询设置不同分辨率下的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，下⾯是我经常使⽤的⼯具，有利于提⾼转换效率。
margin属性值可以为百分比
现阶段⼿机端⽤的最多就是这个⽅法，能保持不同屏幕下元素显⽰效果⼀致，也不⽤写多套样式。
⽅案五.flex 弹性盒⼦布局
利⽤ flex 属性来适配不同屏幕，下图利⽤简单的属性实现栏⽬响应式

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。