响应式布局解决方案

1.rem

rem是一个灵活的、可扩展的单位，由浏览器转化像素并显示。rem单位无论嵌套层级如何，都只相对于浏览器的根元素（HTML元素）的font-size。默认情况下，html元素的font-size为16px，

为了计算方便，通常可以将html的font-size设置成：

    html{ font-size: 62.5% }

这种情况下：

    1 rem = 10px

如果css里面没有设定html的font-size，则默认浏览器以1rem=16px来换算。

2.通过vw/vh来实现自适应

css3中引入了一个新的单位vw/vh，与视图窗口有关，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度，除了vw和vh外，还有vmin和vmax两个相关的单位。各个单位具体的含义如下：

单位	含义
vw	相对于视窗的宽度，视窗宽度是100vw
vh	相对于视窗的高度，视窗高度是100vh
vmin	vw和vh中的较小值
vmax	vw和vh中的较大值

1vw都等于视图宽度的百分之一。

那么px可以通过如下方式换算成vw：

1px = （1/375）*100 vw

绝大多数的浏览器支持vw单位，但是ie9-11不支持vmin和vmax，考虑到vmin和vmax单位不常用，vw单位在绝大部分高版本浏览器内的支持性很好，但是opera浏览器整体不支持vw单位，如果需要兼容opera浏览器的布局，不推荐使用vw。

3.百分比

（1）子元素height和width的百分比

子元素的height或width中使用百分比，是相对于子元素的直接父元素，width相对于父元素的width，height相对于父元素的height。

(2) top和bottom 、left和right

子元素的top和bottom如果设置百分比，则相对于直接非static定位(默认定位)的父元素的高度，同样

子元素的left和right如果设置百分比，则相对于直接非static定位(默认定位的)父元素的宽度。

（3）padding

子元素的padding如果设置百分比，不论是垂直方向或者是水平方向，都相对于直接父亲元素的width，而与父元素的height无关。

（4）margin

跟padding一样，margin也是如此，子元素的margin如果设置成百分比，不论是垂直方向还是水平方向，都相对于直接父元素的width。

（5）border-radius

border-radius不一样，如果设置border-radius为百分比，则是相对于自身的宽度，

 

缺点

从上述对于百分比单位的介绍我们很容易看出如果全部使用百分比单位来实现响应式的布局，有明显的以下两个缺点：

（1）计算困难，如果我们要定义一个元素的宽度和高度，按照设计稿，必须换算成百分比单位。

（2）从小节1可以看出，各个属性中如果使用百分比，相对父元素的属性并不是唯一的。比如width和height相对于父元素的width和height，而margin、padding不管垂直还是水平方向都相对比父元素的宽度、border-radius则是相对于元素自身等等，造成我们使用百分比单位容易使布局问题变得复杂。

4.媒体查询

使用@media媒体查询可以针对不同的媒体类型定义不同的样式，特别是响应式页面，可以针对不同屏幕的大小，编写多套样式，从而达到自适应的效果

通过媒体查询，可以通过给不同分辨率的设备编写不同的样式来实现响应式的布局，比如我们为不同分辨率的屏幕，设置不同的背景图片。比如给小屏幕手机设置@2x图，为大屏幕手机设置@3x图，通过媒体查询就能很方便的实现。

但是媒体查询的缺点也很明显，如果在浏览器大小改变时，需要改变的样式太多，那么多套样式代码会很繁琐。

关于媒体查询，详细可以访问：https://blog.csdn.net/weixin_39089928/article/details/88843068

 

 

文章参考：

1.http://caibaojian.com/rem-and-px.html

2.链接：https://juejin.im/post/5b39905351882574c72f2808