响应式

媒体查询

-sreen 浏览器

-min-width最小屏幕尺寸

-max-width最大屏幕尺寸

.container {
  width: 100px;
  height: 200px;
}

/* 100-200 */
@media screen and (min-device-width: 100px) and (max-device-width: 200px) {
  .container {
    background-color: #ccc;
  }
}

/* 201-300 */
@media screen and (min-device-width: 201px) and (max-device-width: 300px) {
  .container {
    background-color: #ddd;
  }
}

/* 301-400 */
@media screen and (min-device-width: 301px) and (max-device-width: 400px) {
  .container {
    background-color: #eee;
  }
}