响应式布局如何实现

css面试题@响应式布局如何实现

1为什么要使用响应式布局

响应式布局可以让网站同时适配不同分辨率和不同的手机端，让客户有更好
的体验。

2如何实现

方案一：百分比布局

利用对属性设置百分比来适配不同屏幕，注意这里的百分比是相对于父元素； 能够设置的属性有width，、height、padding、margin，其他属性比如border、 font-size不能用百分比来设置的
由于没办法对font-size进行百分比设置，所以用的最多就是对图片和大块布局进行百分比设置。

方案二：使用媒体查询 (CSS3@media 查询)

利用媒体查询设置不同分辨率下的css样式，来适配不同屏幕。
媒体查询相对于百分比布局，可以对布局进行更细致的调整，但需要在每个分辨率下面都写一套css样式。
该布局的话适用于简单的网页，可以使移动端和pc端使用一套网址。从而节约成本。也方便后期的维护，bootcss就是用了CSS3的media来实现响应的 但是相对于复杂的网页就不适合了（如：淘宝，京东）等等

方案三.rem 响应式布局

rem布局的原理

rem：相对于根元素(即html元素)font-size计算值的倍数。
如 html的font-size为100px；那么2rem就为200px。
通俗的来讲的话rem就是通过JavaScript来获取页面的宽度，从而动态的计算rem。这样就会使不同分辨率下展现出相同的效果。
//代码展示

上述代码中 7.5为动态的值，根据设计图的宽度进行动态的改变。window.onresize的作用是：当页面的宽度或高度发生改变时，再次进行调用rem函数。

方案四.vw 响应式布局

vm，vh相应式布局通俗来讲就是有一点类似百分比布局 将页面的宽和高分别分为100份 1vm就是为宽度的百分之一，同理1vh及为高度的百分之一。段手机端用的最多就是这个方法，能保持不同屏幕下元素显示效果一致，也不用写多套样式。

方案五.flex 弹性布局

flex就是利用css3中的弹性盒子向下兼容到IE10
利用flex属性来适配不同屏幕， 该方法一般都会结合rem布局来写移动端页面