wangry

Appearance

媒体查询 ​

什么是媒体查询，作用？ ​

媒体查询用于根据设备的特性（如屏幕尺寸、分辨率等）应用不同的样式规则，它允许创建响应式设计，使页面在不同设备和屏幕尺寸下表现良好

语法 ​

通常包含@media关键字，后跟条件，例如屏幕宽度

css
@media (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

媒体类型 ​

如果不应用媒体类型，@media规则默认选择所有类型的设备，否则，媒体类型紧跟在@media规则之后，设备有很多种，可以分为4类：

  • all：适用于所有媒体类型

  • print：用于打印机

  • screen：用于计算机屏幕、平板电脑和智能手机

  • speech：用于大声“朗读页面的屏幕阅读器”

css
@media screen and (max-width: 480px) {
  .text {
    font-size: 16px;
  }
}

断点 ​

断点是确定何时更改布局和调整媒体查询中的新规则的关键

css
@media (max-width: 480px) {
  .text {
    font-size: 16px;
  }
}

如上述断点是480px

常见的断点是分辨率，常用断电：

  • 320px - 480px：移动设备

  • 481px - 768px：iPad、平板电脑

  • 769px - 1024px：小屏幕、笔记本电脑

  • 1025px - 1200px：台式机、大屏幕

  • 1201px 及以上：超大屏幕、电视

规则 ​

1、宽高 width、max-width、min-width

2、朝向 orientation（portrait竖放、landscape横放）

orientation: landscape

与、或、非 ​

1、使用 and

css
@media screen and (min-width: 400px) and (orientation: landscape) {
  body {
    color: blue;
  }
}

2、使用 ,

css
@media screen and (min-width: 400px), screen and (orientation: landscape) {
  body {
    color: blue;
  }
}

3、使用not让整个媒体查询失效

css
@media not all and (orientation: landscape) {
  body {
    color: blue;
  }
}
/* 只会在朝向为竖着的时候变成蓝色 */

响应式 ​

css
@media (min-width: 1024px) {
    /* 桌面样式 */
}

@media (min-width: 768px) and (max-width: 1023px) {
    /* 平板样式 */
}

@media (max-width: 767px) {
    /* 手机样式 */
}

@media和@import ​

@media 用于在 CSS 中直接包含条件样式，而 @import 可以用于从外部样式表导入，条件同样可以应用媒体查询。@media 更常用于响应式设计，且相比 @import 加载速度更快

css
@import url('responsive.css') screen and (max-width: 768px);

参考 ​

https://www.freecodecamp.org/chinese/news/css-media-queries-breakpoints-media-types-standard-resolutions-and-more/

https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Media_queries