如何使用CSS属性选择器根据屏幕尺寸动态加载响应式样式？-css教程-PHP中文网

属性选择器本身不响应屏幕尺寸变化，真正起作用的是媒体查询（@media）；混用二者易导致无效或难维护代码，因[data-size="mobile"]等需js手动切换，无法自动响应视口变化。

如何使用css属性选择器根据屏幕尺寸动态加载响应式样式？

CSS 属性选择器（如 [data-theme]、[aria-hidden]）本身不响应屏幕尺寸变化，也不能直接“根据屏幕尺寸加载样式”。这是个常见误解——属性选择器匹配的是 HTML 元素的属性值是否存在或等于某字符串，和视口宽度、设备类型等完全无关。

真正起作用的是媒体查询（@media），不是属性选择器。把两者混用，容易写出无效或难以维护的代码。

为什么不能用 `[data-size="mobile"]` 配合 JS 动态切属性来响应屏幕变化

有人会写这样的逻辑：

if (window.innerWidth <p>再配 CSS：<code>[data-size="mobile"] .card { padding: 10px; }</code></p><p>这看似可行，但实际踩坑极多：</p>

resize 事件高频触发，反复 setAttribute 造成 layout thrashing，尤其在 Safari 和低端安卓机上明显卡顿
横竖屏切换、系统字体缩放、双击放大等行为也会触发 resize，但此时 window.innerWidth 值不稳定（比如 iOS Safari 横屏时返回值可能滞后），导致 data-size 错误或延迟更新
服务端渲染（SSR）或初始加载时，JS 还没执行，data-size 是空的，样式直接失效
无法被搜索引擎或预渲染工具识别为响应式行为，SEO 友好性差

`@media` 才是唯一可靠且零 JS 的响应式控制方式

浏览器原生支持 @media，它基于视口实时计算，无需 JS 干预，兼容性好（IE9+），且能被 SSR、爬虫、打印预览等环境正确解析。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

正确写法就是直接写媒体查询：

:root {
  --pad: 12px;
  --border: 1px solid #ccc;
}
<p>@media (max-width: 768px) {
:root {
--pad: 8px;
--border: 0.5px solid #eee;
}
}</p><p>.card {
padding: var(--pad);
border: var(--border);
}</p>

关键点：

断点必须写在 :root 下，否则子元素读不到变量更新
不要把媒体查询塞进某个组件 class 里，比如 .card @media (max-width: 768px) { ... } —— 这种写法无效，CSS 变量不会继承自选择器作用域
如果要用 transition 动画边框或内边距，得明确写在原生属性上：transition: padding 0.2s, border-color 0.2s，而不是 transition: --pad 0.2s（后者不生效）