CSS3 多媒体查询实例学习笔记

什么是多媒体查询

在网页设计时，多媒体查询可以用来针对不同的设备定义不同的样式。通过检查设备的屏幕分辨率、浏览器大小或方向等属性，从而应用不同的样式。

语法：

cssCopy Code
@media (media feature) {
  /* 样式规则 */
}

• media feature：不同的检测条件。
• 样式规则：针对满足条件的设备定义的 CSS 样式。

为何需要多媒体查询

随着移动设备的普及，网站需要适应各种不同的设备，这一点变得尤为重要。同一份网站需要在 PC、平板电脑、手机等设备上呈现出最佳的显示效果。多媒体查询是实现这一目标的重要工具，可以让用户在不同设备上获得更加友好的使用体验。

多媒体查询实例

针对不同设备设置字体大小

cssCopy Code
/* 当设备宽度小于等于600px时，body元素的字体大小为16px */
@media screen and (max-width: 600px) {
  body {
    font-size: 16px;
  }
}

/* 当设备宽度大于600px但小于等于900px时，body元素的字体大小为18px */
@media screen and (min-width: 601px) and (max-width: 900px) {
  body {
    font-size: 18px;
  }
}

/* 当设备宽度大于900px时，body元素的字体大小为20px */
@media screen and (min-width: 901px) {
  body {
    font-size: 20px;
  }
}

针对不同设备设置图片大小

cssCopy Code
/* 当设备宽度小于等于600px时，图片宽度为100% */
@media screen and (max-width: 600px) {
  img {
    width: 100%;
  }
}

/* 当设备宽度大于600px但小于等于900px时，图片宽度为60% */
@media screen and (min-width: 601px) and (max-width: 900px) {
  img {
    width: 60%;
  }
}

/* 当设备宽度大于900px时，图片宽度为40% */
@media screen and (min-width: 901px) {
  img {
    width: 40%;
  }
}

针对不同设备设置导航栏显示方式

cssCopy Code
/* 当设备宽度小于等于600px时，导航栏垂直显示 */
@media screen and (max-width: 600px) {
  nav {
    flex-direction: column;
  }
}

/* 当设备宽度大于600px时，导航栏水平显示 */
@media screen and (min-width: 601px) {
  nav {
    flex-direction: row;
  }
}

以上是多媒体查询的一些实例，不同的样式和条件可以组合在一起，以实现更加复杂的效果。