响应式布局常用方案响应布局是什么？响应式布局就是同一页面在不同分辨率屏幕上有不同的布局，就是一套代码可以适配不同的屏幕

响应布局是什么？

响应式布局就是同一页面在不同分辨率屏幕上有不同的布局，就是一套代码可以适配不同的屏幕。常用的响应式布局方案有百分比、媒体查询、rem、vw、flex等

px单位不是固定

像素是网页布局的基础，一个像素表示了计算机屏幕显示的最小单位，像素分为两类物理像素和css像素 dpr = 物理像素/分辨率 在不缩放的情况下1px = 1dpx 所以不同分辨下的px是不一样的

方案一百分比布局

通过设置百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。

优点：兼容性比较好
缺点：

计算困难，如果我们要定义一个元素的宽度和高度，按照设计稿，必须换算成百分比单位
各个属性中如果使用百分比，相对父元素的属性并不是唯一的。比如width和height相对于父元素的width和height，而margin、padding不管垂直还是水平方向都相对比父元素的宽度、border-radius则是相对于元素自身等等，造成我们使用百分比单位容易使布局问题变得复杂。

方案二媒体查询

@media 媒体查询是css3的新属性，根据媒体查询设置不同分辨率下的css样式，来适配不同屏幕

优点：媒体查询相对于百分比布局，可以对布局进行更细致的调整，但需要在每个分辨率下面都写一套 css 样式，视具体情况而定。注意：IE6、7、8 不支持媒体查询
缺点：根据分辨率需要写多套css样式，css比较繁琐

/* 超小设备 (手机, 600px 以下屏幕设备) */
@media only screen and (max-width: 600px) {
    .example {background: red;}
}

/* 小设备 (平板电脑和大型手机，600 像素及以上) */
@media only screen and (min-width: 600px) {
    .example {background: green;}
}

/* 中型设备（平板电脑，768 像素及以上） */
@media only screen and (min-width: 768px) {
    .example {background: blue;}
} 

/* 大型设备（笔记本电脑/台式机，992 像素及以上） */
@media only screen and (min-width: 992px) {
    .example {background: orange;}
} 

/* 超大型设备（大型笔记本电脑和台式机，1200 像素及以上） */
@media only screen and (min-width: 1200px) {
    .example {background: pink;}
}

方案三 rem

当前页面中元素的 rem 单位的样式值都是 针对于html 元素的font-size 的值进行动态计算的，所以有两种方法可以达到适配不同屏幕：①可以利用媒体查询，在不同分辨率下给 html 的 font-size 赋值，②也可以利用 js 动态计算赋值。

优点：动态的改变根元素的font-size可以自适应不同分辨率的屏幕
缺点：打开页面时元素大小会有个变化的过程 config.js

plugins: {
        'postcss-pxtorem': {
          rootValue: 100,
          propList: ['*'],
          exclude: /(node_module)/,
          // selectorBlackList: ['pc-'],
        },

html {
  font-size: 600px;
}
@media (max-width: 1440px) {
  html {
    font-size: 498px;
  }
}

方案四 vw

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

优点：和百分比不同，vw单位永远都是相对于视口宽度进行计算，百分比相对于父元素。计算方便
缺点兼容性不是很好

'postcss-px-to-viewport': {
          unitToConvert: 'px', // 需要转换的单位，默认为"px"
          viewportWidth: 1920, // 视窗的宽度，对应移动端设计稿的宽度，一般是375
          unitPrecision: 3, // 单位转换后保留的精度
          propList: [
            // 能转化为vw的属性列表
            '*',
          ],
          viewportUnit: 'vw', // 希望使用的视口单位
          fontViewportUnit: 'vw', // 字体使用的视口单位
          selectorBlackList: [], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
          minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
          mediaQuery: false, // 媒体查询里的单位是否需要转换单位
          replace: true, // 是否直接更换属性值，而不添加备用属性
          exclude: /(\/|\\)(node_modules)(\/|\\)/, // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
        },

方案五 scale zoom

zoom和scale这两个东西都是用于对元素的缩放，但两者除了兼容性之外还有一些不同的地方。

zoom缩放会将元素保持在左上角，而scale默认是中间位置，可以通过transform-origin来设置。

另外他们执行的渲染顺序也不同zoom可能影响到盒子的计算。

@media (max-width: 1440px) {
  .pc-page {
  	// scale
    transform: scale(0.83);
	// zoom
	zoom: 0.83
  }
}

方案六 flex

弹性盒子是一种用于按行或按列布局元素的一维布局方法，元素可以膨胀以填充额外的空间，收缩以适应更小的空间，适用于任何元素上，如果一个元素使用了flex弹性布局,内部会形成bfc 兼容性不是太好因为进行了缩放media查询，不兼容

方案七利用ui框架实现响应式布局

其实，现在的主流UI框架都会考虑到响应式布局这个问题，比如elementUI,iview等框架提供了栅格系统，搭配来实现响应式布局。所以在工作中直接哪来使用就完事了。 elementUI的栅格布局实现原理是通过浮动进行内容的排列，宽度使用占用百分比

总结：

其实我们响应式实现时一般会使用多种一起组合使用个人比较喜欢@media + rem

参考文献

1. [响应布局方案](https://www.csdn.net/tags/MtjaIgysMTIzMTctYmxvZwO0O0OO0O0O.html?spm=1000.2123.3001.4431)

2. [响应式布局常用方案对比](https://juejin.cn/post/6844903630655471624#heading-19)

响应式布局常用方案