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

原创于 2023-10-08 09:37:57 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #css3

本文介绍了在网页设计中如何运用固定宽度策略（如1004px至1280px），结合vw单位进行布局，并通过媒体查询实现不同屏幕尺寸下的自适应，以及使用lib-flexible和postcss-plugin-px2rem插件处理rem单位转换。

固定宽度的样式

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;
  }
}