2020-3-15 前端达人
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。这样就会使不同分辨率下展现出相同的效果。
//代码展示
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函数。