@media适配怎么写

@media查询可以通过在CSS代码中添加@media规则来实现。这个规则允许你在不同的屏幕尺寸下使用不同的CSS代码。例如，你可以在@media(min-width: 768px){...} 中定义针对大屏幕设备的样式，而在@media(max-width: 767px){...} 中定义针对小屏幕设备的样式。

下面是一个基本的示例，该示例通过@media查询为小于768px的设备应用不同的CSS样式：

/* 默认样式 */
body {
  font-size: 16px;
  color: #333;
}

/* 在小于768px的屏幕上应用的样式 */
@media (max-width: 767px) {
  body {
    font-size: 14px;
    color: #666;
  }
}

在这个例子中，我们定义了两个样式规则：一个是默认样式，另一个是@media查询。当屏幕宽度小于或等于767像素时，CSS样式会被覆盖，并且body元素的字体大小和颜色会发生改变。

@media查询还支持其他类型的媒体，例如打印媒体、电视等。你可以根据需要在@media规则中指定不同的媒体类型。例如，要为打印样式指定@media规则，可以使用以下代码：

@media print {
  /* 打印样式 */
}

这会为打印样式定义一个@media规则，当用户打印页面时，该规则会自动应用。

相关问题

@media 媒体查询

@media是CSS3中的一个重要特性，它可以根据不同的设备或者不同的屏幕尺寸来设置不同的CSS样式，实现页面在不同设备上的适配。媒体查询通过检查设备的特性（如屏幕宽度、高度、设备方向、分辨率等）来确定当前使用的设备类型，并根据不同的条件应用不同的CSS样式。

媒体查询语法格式为：

@media mediatype and (condition) {
    CSS样式代码
}

其中，mediatype可以是all、screen、print等，condition是媒体查询条件，可以是屏幕宽度、高度、方向、分辨率等。

例如，下面的代码表示在屏幕宽度小于等于600px时应用的样式：

@media screen and (max-width: 600px) {
    body {
        background-color: #f00;
    }
}

@media only screen

@media only screen是CSS中的一个媒体查询规则，用于指定在特定屏幕尺寸或媒体类型下应用的样式。它可以用来创建响应式设计，使网页能够根据不同设备的屏幕尺寸和特性进行适配。

@media只针对屏幕媒体类型，而忽略打印、投影和其他媒体类型。它的语法如下：

@media only screen and (条件) {
/* 在满足条件时应用的样式 */
}

其中，条件可以是以下之一或其组合：

- width：屏幕宽度
- height：屏幕高度
- orientation：屏幕方向（横向或纵向）
- aspect-ratio：屏幕宽高比
- resolution：屏幕分辨率

通过使用@media only screen，我们可以根据不同的屏幕尺寸和特性，为不同设备提供不同的样式和布局，以提供更好的用户体验。