@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 only screen

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

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

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

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

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

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

vue3适配移动端vw vh单位配合@media做的适配

Vue3本身并不提供移动端适配的方案，但是可以使用vw、vh单位，以及@media媒体查询来实现移动端适配。

1. 设置html的font-size
在入口文件中，可以通过计算屏幕宽度来设置html的font-size，例如：

// main.js
const setHtmlFontSize = () => {
  const html = document.documentElement
  const screenWidth = html.clientWidth
  html.style.fontSize = screenWidth / 375 * 16 + 'px' // 375是设计稿宽度，16是基准字体大小
}

setHtmlFontSize()
window.addEventListener('resize', setHtmlFontSize)

在上述代码中，我们根据屏幕宽度计算出一个字体大小，然后设置到html标签的font-size属性上。

2. 使用vw、vh单位
在样式中，我们可以使用vw、vh单位来设置元素的宽度、高度、字体大小等。vw表示视口宽度的百分比，vh表示视口高度的百分比。

例如：

.container {
  width: 80vw;
  height: 50vh;
  font-size: 4vw;
}

在上述代码中，.container元素的宽度为视口宽度的80%，高度为视口高度的50%，字体大小为视口宽度的4%。

3. 使用@media媒体查询
有些情况下，我们需要针对不同的屏幕尺寸设置不同的样式。这时候可以使用@media媒体查询来实现。

例如，在手机竖屏状态下，我们需要将某个元素的宽度设置为100%：

@media screen and (max-width: 768px) {
  .container {
    width: 100%;
  }
}

在上述代码中，当屏幕宽度小于等于768px时，.container元素的宽度会被设置为100%。

综上所述，我们可以使用vw、vh单位配合@media媒体查询来实现移动端适配。