css中的媒体查询
赵美*
CSS,@media,媒体查询
项目描述
媒体查询可以让我们根据设备显示器的特性（如屏幕比例、设备方向：横向或纵向）为其设定CSS样式使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。
上传时间
2023.02.21
浏览人数
385人
赵美*
未知
Hot:2026
什么是媒体查询？
简单的来讲媒体查询是能让 CSS 可以更精确的作用于不同的设备，可以针对不同的媒体类型(包括显示器、便携设备等等)在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。
一 . 媒体类型
| 值 | 描述 | |
| all | 用于所有多媒体类型设备 | |
| 用于打印机 | ||
| screen | 用于智能手机，平板，电脑屏幕 | |
| speech | 用于屏幕阅读器 | |
二 . 媒体查询书写的基本形式
@media 媒体类型 and （媒体特性）{你的样式}
例如：
@media screen and (max-width: 576px) {
.class{
display: block;
}
}
max-width: 576px 表示当屏幕宽度小于等于576px时，该样式生效。
三 . 不同设备的基本分界点
不同宽度和高度的屏幕和设备尺寸：
/* 超级小屏幕（手机，576 像素及以下） */
@media screen and (max-width: 576px) {...}
/* 小屏幕（纵向平板电脑和大型手机，600 像素及以上） */
@media screen and (min-width: 600px) {...}
/* 中等屏幕（横向平板电脑，768 像素及以上） */
@media screen and (min-width: 768px) {...}
/* 大屏幕（笔记本电脑/台式机，992像素 及以上） */
@media screen and (min-width: 992px) {...}
/* 特大屏幕（大型笔记本电脑和台式机，1200像素 及以上） */
@media screen and (min-width: 1200px) {...}
/* 超级大屏幕（特大型笔记本电脑和台式机，1400像素 及以上） */
@media screen and (min-width: 1400px) {...}
四 . 多媒体查询简单实例
1 . 在指定的设备上使用对应的样式替代原有的样式：
/* 576px以下屏幕 ，背景颜色改为浅粉色 */
@media screen and (max-width: 576px) {
body {
background-color: lightpink;
}
}
2 . 更改不同屏幕尺寸上的元素的字体大小：
/* 如果屏幕尺寸为 768px 或更大，font-size 设置为 100px */
@media only screen and (min-width: 768px) {
.class {
font-size: 100px;
}
}
3 . 在不同屏幕尺寸上对元素进行隐藏或显示：
/* 如果屏幕尺寸为 576 像素或更小，请隐藏该元素 */
@media only screen and (max-width: 576px) {
.class {
display: none;
}
/* 如果屏幕尺寸为 576 像素或更小，请显示该元素 */
@media only screen and (max-width: 576px) {
.class {
display: block;
}
赵美*
