css屏幕大小在一定区间内

在Web设计中，CSS样式表是必不可少的一部分，它可以控制网页的样式。其中一个重要的CSS属性是屏幕大小，通过这个属性，我们可以编写针对不同屏幕大小的网页。本文将介绍如何在一定区间内使用CSS对屏幕大小进行控制。

@media screen and (min-width: 768px) and (max-width: 1024px) {
  /* 在屏幕宽度在768px到1024px之间时应用以下样式 */
  body {
    font-size: 16px;
    background-color: #f1f1f1;
  }
  p {
    color: #333;
    font-size: 18px;
  }
}

@media screen and (max-width: 767px) {
  /* 在屏幕宽度小于767px时应用以下样式 */
  body {
    font-size: 14px;
    background-color: #fff;
  }
  p {
    color: #666;
    font-size: 16px;
  }
}

上述代码中，我们使用@media标识符对不同屏幕大小应用不同的CSS样式。其中，min-width和max-width属性控制屏幕宽度的范围。

在屏幕宽度在768px到1024px之间时，我们将body元素的背景色设置为#f1f1f1，字体大小设置为16px，段落元素p的字体颜色设置为#333，字体大小设置为18px。

当屏幕宽度小于767px时，我们将body元素的背景色设置为#fff，字体大小设置为14px，段落元素p的字体颜色设置为#666，字体大小设置为16px。

通过以上代码，我们可以根据不同屏幕大小设置不同的CSS样式，从而达到更好的用户体验。