wordpress网站迁移,商务封面图片素材,简易网站开发,学校网站建设网站媒体查询#xff08;media#xff09;介绍
媒体查询#xff08;media#xff09;是 CSS 中用来针对不同的设备特性#xff08;如屏幕尺寸、分辨率等#xff09;应用不同样式的一种技术。通过媒体查询#xff0c;可以使页面在不同设备上呈现不同的布局#xff0c;实现响…媒体查询media介绍
媒体查询media是 CSS 中用来针对不同的设备特性如屏幕尺寸、分辨率等应用不同样式的一种技术。通过媒体查询可以使页面在不同设备上呈现不同的布局实现响应式设计。
media media-type and (media-feature) {/* CSS rules */
}media-type表示媒体类型常见的媒体类型有 all适用于所有设备默认 screen适用于屏幕设备 print适用于打印设备
media-feature表示媒体特性比如设备的宽度、高度、分辨率等。 常见的媒体特性有 min-width设备屏幕的最小宽度 max-width设备屏幕的最大宽度 orientation设备的屏幕方向横向 landscape 或纵向 portrait 媒体查询中的逻辑运算符 and用于组合多个条件所有条件都满足时才会应用样式。 ,逗号相当于 或 操作任意一个条件满足时应用样式。 not取反应用在不符合某个条件的设备上。
常见例子
1. 基本的宽度媒体查询
针对不同屏幕宽度应用不同样式。一般用于响应式布局根据设备的屏幕宽度调整布局和样式。
/* 当屏幕宽度小于等于600px时应用此样式 */
media screen and (max-width: 600px) {body {background-color: lightblue;}
}/* 当屏幕宽度大于600px时应用此样式 */
media screen and (min-width: 601px) {body {background-color: lightgreen;}
}2. 响应式布局中常用的断点
针对不同设备屏幕宽度使用断点来调整布局。
/* 手机 */
media screen and (max-width: 480px) {body {font-size: 14px;}
}/* 平板设备 */
media screen and (min-width: 481px) and (max-width: 768px) {body {font-size: 16px;}
}/* 桌面设备 */
media screen and (min-width: 769px) {body {font-size: 18px;}
}3. 针对屏幕方向的媒体查询
orientation 可以判断设备是横屏还是竖屏。
/* 设备为横屏模式时应用此样式 */
media screen and (orientation: landscape) {body {background-color: orange;}
}/* 设备为竖屏模式时应用此样式 */
media screen and (orientation: portrait) {body {background-color: yellow;}
}4. 针对高分辨率屏幕如 Retina 屏幕的媒体查询
min-resolution 或 min-device-pixel-ratio 可以检测设备的像素密度。
/* 针对高分辨率屏幕 */
media screen and (min-resolution: 2dppx) {img {width: 50%;}
}/* 或者使用 device-pixel-ratio */
media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2) {img {width: 50%;}
}5. 使用 not 排除某些条件
not 可以用于排除某些特定条件。
/* 应用在非屏幕设备上 */
media not screen {body {background-color: gray;}
}6. 多条件查询
组合多个条件只有当两个条件同时满足时才会应用样式。
/* 当屏幕宽度在600px和1200px之间且是横屏模式时应用此样式 */
media screen and (min-width: 600px) and (max-width: 1200px) and (orientation: landscape) {body {background-color: pink;}
}媒体查询的实际应用
媒体查询在响应式设计中应用非常广泛可以通过它来根据设备的特性动态调整页面布局。例如在开发移动端友好的网站时可以通过媒体查询在不同屏幕宽度上设置不同的字体大小、间距、布局等使得网站在手机、平板、桌面等设备上都有良好的展示效果。
总结 媒体查询是响应式设计的核心通过它可以针对不同的设备或屏幕特性应用不同的 CSS 样式。 常见的使用场景包括设备宽度调整、屏幕方向检测、高分辨率屏幕优化等。
