HTML中使用media属性针对不同设备加载不同样式表的方法-html教程-PHP中文网

media属性仅对和标签有效，用于指定样式表适用的媒介类型；在等其他标签上使用会被浏览器忽略。

html中使用media属性针对不同设备加载不同样式表的方法

media属性只在link和style标签里有效

很多人误以为media能用在任意HTML标签上，其实它只被和标签原生支持。用在

或上完全无效，浏览器会直接忽略。常见错误现象：写了
...，发现打印时样式没变——不是逻辑错了，是语法不被识别。

 ✅ 正确

 ✅ 正确（但注意：内部@media规则比这个更常用）
... ❌ 无任何效果
media值支持逻辑运算符，但要注意优先级和兼容性
and、not、,（逗号）这三种运算符确实可用，但它们的组合行为容易出错。比如not screen and (max-width: 768px)实际等价于(not screen) and (max-width: 768px)，而not screen永远为假——因为当前环境必然是某种media类型，不可能“不是screen”又同时满足宽度条件。
更安全的写法是把否定放在整个条件外：screen and (max-width: 768px), not print这种写法意义模糊，应避免。

推荐组合方式：screen and (min-width: 1024px)、print、screen and (prefers-color-scheme: dark)


not只建议用于简单否定，如not all基本无用，not print也极少需要
逗号表示“或”，但浏览器仍会下载所有匹配的CSS文件，哪怕只用其中一份——这点常被忽略，影响首屏性能

print样式表必须显式声明，且不能依赖JavaScript触发
用户点“打印”时，浏览器不会执行JS，也不会重新计算media值。所以靠document.createElement('link')动态插入media="print"的样式表，大概率在打印预览里不生效。
真正可靠的方案是提前写死在里：
<link rel="stylesheet" href="print.css" media="print">
还要注意：打印样式表里用display: none隐藏导航栏、广告位是常规操作，但visibility: hidden不行——它仍占页面流，可能导致内容被截断。

											
												
												
													HTML Text Extract
													从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。
												
												下载
												
											
										

打印专用样式必须用media="print"，不能靠@media print内部规则“覆盖”屏幕样式——因为浏览器可能已把屏幕CSS加载并解析完毕，覆盖不彻底
如果用了CSS-in-JS或构建工具自动拆包，要确认print.css没有被tree-shaking掉
测试时别只看“另存为PDF”，务必打开浏览器原生打印预览（Ctrl+P），那里才反映真实行为

移动端适配慎用handheld，优先用screen and (max-width: ...)

handheld这个值在现代浏览器中基本被弃用。Chrome、Firefox、Safari都无视它，只有极老的Opera或黑莓浏览器曾支持。把它当“手机专用”用，等于白写。
真正起作用的是媒体特性查询，比如宽度、像素密度、交互方式：

✅ screen and (max-width: 480px) —— 覆盖小屏手机
✅ screen and (hover: hover) —— 区分触屏/鼠标设备
✅ screen and (-webkit-min-device-pixel-ratio: 2) —— 高分屏优化
❌ handheld —— 不推荐，无实际效果

另外，media属性控制的是“是否加载该CSS文件”，不是“是否应用”。即使media不匹配，文件也可能被浏览器预加载（尤其在HTTP/2下），只是不解析其中规则。这点在调试网络面板时容易误判。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！