媒体查询有几种方式：CSS媒体查询的三种主要实现方式
<link>方式引入媒体查询
这是最早期的媒体查询实现方式，通过在HTML文档的<head>部分添加<link>标签,将媒体查询与外部样式表关联起来。
<head>
<link rel="stylesheet" media="(max-width: 768px)" href="mobile.css">
</head>
这种方式适用于简单的响应式设计,但存在以下局限性：
- 需要维护多个CSS文件
- 页面加载时会同时加载所有CSS文件，即使某些样式在特定设备上根本不会使用
- 不支持在同一个CSS文件中为不同媒体类型定义不同样式
@media规则（推荐方式）
这是目前最常用的媒体查询实现方式,允许在单个CSS文件中定义多个媒体查询规则。
/* 基础样式 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
/* 当屏幕宽度小于600px时应用的样式 */
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}
/* 当屏幕宽度在601px到1024px之间时应用的样式 */
@media (min-width: 601px) and (max-width: 1024px) {
body {
background-color: lightgreen;
}
}
/* 当屏幕宽度大于1024px时应用的样式 */
@media (min-width: 1025px) {
body {
background-color: lightcoral;
}
}
@media规则支持多种媒体类型和查询条件,包括：
width：视口宽度height：视口高度device-width：设备像素宽度device-pixel-ratio：设备像素比例orientation：设备方向（portrait或landscape）resolution：设备分辨率
JavaScript实现媒体查询
除了CSS方式外，也可以使用JavaScript实现动态媒体查询,这种方式适用于需要更复杂逻辑或实时响应设备变化的场景。
// 监听媒体查询变化
const mediaQuery = window.matchMedia('(max-width: 768px)');
function handleChange(e) {
if (e.matches) {
// 当条件为真时执行的操作
console.log('屏幕宽度小于或等于768px');
} else {
// 当条件为假时执行的操作
console.log('屏幕宽度大于768px');
}
}
// 注册事件监听器
mediaQuery.addListener(handleChange);
// 初始检查
handleChange(mediaQuery);
媒体查询是实现响应式设计的关键技术,三种主要实现方式各有优缺点：
<link>方式简单但不够灵活，适合简单场景@media规则是目前最常用的实现方式，功能强大且灵活- JavaScript方式提供了最大的灵活性，但实现复杂度也更高
在实际项目中，建议优先使用@media规则，这是实现响应式设计的标准方法，对于更复杂的场景，可以结合使用多种方式,实现最佳的用户体验。
随着移动设备的普及和屏幕多样性的增加，掌握媒体查询技术变得越来越重要，无论是新手还是经验丰富的开发者，都应该熟练掌握这些技术,以应对不断变化的前端开发需求。
文章已关闭评论！
