PC端常用响应式布局总结（以后建门户类的直接看这篇）

固定宽度的样式

1.常见的固定宽度范围是1004px到1280px之间,再结合你的页面布局，如下例子中子盒子直接使用vw宽度进行布局

.container {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
}

媒体查询和响应式布局

通过使用@media规则，我们可以根据不同的屏幕宽度为页面应用不同的样式。

@media (max-width: 768px) {
  /* 在宽度小于等于768px时应用的样式 */
  .container {
    width: 100%;
    padding: 20px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  /* 在宽度在769px到1024px之间应用的样式 */
  .container {
    width: 90%;
    margin: 0 auto;
  }
}

@media (min-width: 1025px) {
  /* 在宽度大于等于1025px时应用的样式 */
  .container {
    width: 80%;
    margin: 0 auto;
  }
}

使用rem单位和插件

使用lib-flexible和postcss-plugin-px2rem插件。lib-flexible可以根据屏幕尺寸动态设置根元素的字体大小，而postcss-plugin-px2rem可以自动将像素单位转rem