css 响应式布局,简单实用的方法

index.html设置一个盒子用来展示效果

 <div class="layout">This is my page Layout</div>

index.css样式

* {
    margin: 0;
    padding: 0;
    list-style: none;
  }
.layout {
    width: 100vw;
    height: 100vh;
    background: blueviolet;
    color: black;
    font-family: fangsong;
    font-weight: bold;
    font-size: 35px;
    text-align: center;
    padding-top: 50px;
    box-sizing: border-box;
}
/*width<=1201px*/
@media screen and (min-width: 1201px) {
    .layout {
      background: blueviolet;
    }
}
/*width>=1200px && width<=800px*/
@media screen and (max-width: 1200px) and (min-width: 800px) {
    .layout {
      background: purple;
      color: seagreen;
    }
}
/*width>=799px && width<=400px*/
@media screen and (max-width: 799px) and (min-width: 400px) {
    .layout {
      background: orange;
      color: #fff;
    }
}
/*width>=399px*/
@media screen and (max-width: 399px) {
    .layout {
      background: black;
      color: #fff;
    }
}