css 不同媒介的显示样式控制方式

CSS可以根据不同媒介控制显示样式，其中包括屏幕、打印机等不同引擎。通常我们使用@media规则来定义这些不同媒介的样式，其语法如下：

@media mediatype and (media feature){
   CSS-Code;
}

其中mediatype可以是多种媒介类型， 如 screen（屏幕）、print（打印）、speech（语音）等，media feature可以是多种具体的媒介设备参数，如分辨率、颜色深度等。

下面我们进行一些具体示例说明：

1. 调整打印样式

我们可以通过@media规则调整打印页面的样式，让其更加适合打印。比如，我们可以设置背景颜色为白色，让文本更容易阅读，该示例代码如下：

@media print{
  body{
    background-color: white;
    color: black;
  }
}

2.流式布局

我们可以使用@media规则来针对不同的设备分别设置样式，实现更加精细的页面布局。如下例子，我们可以在屏幕尺寸小于等于500px时设置一个流式布局，方便移动设备的浏览：

@media screen and (max-width: 500px){
  div {
    width: 100%;
    height: auto;
  }
}

通过这些示例我们可以看出，通过@media规则我们可以对不同媒介的样式进行灵活的控制。这不仅可以让网页更具移动设备友好性，还可以提供更好的打印效果等。