[分享]css3多媒体查询自适应屏幕

@media screen and (max-width: 768px) {
   /* 在 768px 及以下的屏幕上应用这些 CSS 规则 */
   body {
      font-size: 14px;
   }
   .container {
      margin: 0 auto;
      width: 90%;
   }
}

@media screen and (min-width: 769px) and (max-width: 1200px) {
   /* 在 769px 到 1200px 之间的屏幕上应用这些 CSS 规则 */
   body {
      font-size: 16px;
   }
   .container {
      margin: 0 auto;
      width: 80%;
   }
}

@media screen and (min-width: 1201px) {
   /* 在 1201px 及以上的屏幕上应用这些 CSS 规则 */
   body {
      font-size: 18px;
   }
   .container {
      margin: 0 auto;
      width: 70%;
   }
} 

CSS3多媒体查询功能是开发响应式网站的强大工具之一。在现代化的浏览器中使用CSS3多媒体查询，进行自适应布局，能够实现对不同终端设备的适配。例如，当网站在手机浏览器上打开时，可以根据所使用的设备尺寸，调整相应的排版和布局。这样，网站的用户可以在不同的设备上获得最佳的浏览体验。

要使用CSS3多媒体查询，可以使用 @media 查询。它可以使一个网站在不同的屏幕尺寸下，使用不同的 CSS 样式。以下是一个使用 CSS3 多媒体查询的示例:

在这个例子中，我们使用了三个具体的尺寸条件分别设定了不同的 CSS 规则。每个尺寸条件都使用了 @media 查询，而花括号中包含了CSS规则。例如，当屏幕宽度小于等于768px时，我们设置了字体大小为14px，并将 .container元素的宽度设置为90%。

要注意的是，条件可以包含多个特性，例如上面的规则中min-width 和max-width条件的结合。这种结合使得我们分别适配不同的尺寸段。而在规则生效的时候，会选择最符合条件的规则。