css响应式
meta 标签 viewport
html
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"
/>
Media 媒体查询
媒体类型
| 类型 | 说明 |
|---|---|
| all | 所有设备 |
| screen | 屏幕 |
| 打印预览模式或打印机 |
逻辑运算符
| 逻辑运算符 | 说明 |
|---|---|
| and | 用于将多个媒体特征组合到一个媒体查询中，还可以用于将媒体功能与媒体类型连接起来，相当于“且”的意思 |
| not | 用于媒体查询取反值，表示排除某个媒体类型，相当于“非”的意思 |
| only | 指定某个特定的媒体类型 |
媒体特性
媒体特性表达式是可选的，它负责测试这些特性或特征是否存在、值为多少。 每条媒体特性表达式都必须用括号括起来。常用的特性如下
| 媒体特性 | 说明 |
|---|---|
| height | 定义输出设备中的页面可见区域高度 |
| min-height | 定义输出设备中的页面最小可见区域高度 |
| max-height | 定义输出设备中的页面最大可见区域高度 |
| device-height | 定义输出设备的屏幕可见高度 |
| min-device-height | 定义输出设备的屏幕的最小可见高度 |
| max-device-height | 定义输出设备的屏幕可见的最大高度 |
| width | 定义输出设备中的页面可见区域宽度 |
| min-width | 定义输出设备中的页面最小可见区域宽度 |
| max-width | 定义输出设备中的页面最大可见区域宽度 |
| device-width | 定义输出设备的屏幕可见宽度 |
| min-device-width | 定义输出设备的屏幕最小可见宽度 |
| max-device-width | 定义输出设备的屏幕最大可见宽度 |
| aspect-ratio | 定义输出设备中的页面可见区域宽度与高度的比率 |
| min-aspect-ratio | 定义输出设备中的页面可见区域宽度与高度的最小比率 |
| max-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的最大比率 |
| device-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的比率 |
| min-device-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的最小比率 |
| max-device-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的最大比率 |
| resolution | 定义设备的分辨率。如：96dpi, 300dpi, 118dpcm |
| min-resolution | 定义设备的最小分辨率 |
| max-resolution | 定义设备的最大分辨率 |
使用方式
在 css 文件中使用的基本语法
css
/*
mediatype：媒体类型
and|not|only：逻辑运算符
media feature：媒体特性
*/
@media mediatype and|not|only (media feature) {
}
在 style 标签中使用的基本语法
html
<style media="mediatype and|not|only (media feature)"></style>
使用@import 时基本语法
css
@import url(...) mediatype and|not|only (media feature);
使用外链式引入 CSS 时基本语法
html
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="..." />
link 标签中使用
xml
<link rel="stylesheet" href="index.css" media="screen" />
<link rel="stylesheet" href="demo.css" media="print" />
@import 在样式文件中引入媒体类型
css
@import url('./index.css') screen;
在 style 标签中引入媒体类型
css
<style>
@import url('./index.css') screen;
</style>
bootstrap5 media query 设置
css
/* 小屏设备 (landscape phones, 576px and up) */
@media (min-width: 576px) {
}
/* 中等大小屏幕设备 (tablets, 768px and up) */
@media (min-width: 768px) {
}
/* 普通大小屏幕设备 (desktops, 992px and up) */
@media (min-width: 992px) {
}
/* 大屏幕设备 (large desktops, 1200px and up) */
@media (min-width: 1200px) {
}
/* 超大屏幕屏幕 (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
}