css - 如何根据控件宽度而不是视口宽度编写css媒体查询

Question

是否可以根据控件宽度而不是视口宽度编写 css mediaquery。

示例：如果容器 min-width > 1000px 设置 color=red ，否则使用 css 设置 color=red ？或者代替媒体查询，有没有其他方法可以实现这个场景？

Answer 1

CSS 不是这项工作的合适工具。它不是一种脚本语言，几乎没有使用条件语句。那太好了！这就是它应该的样子。幸运的是，我们有 JavaScript。JS使它变得容易。jsfiddle

<div style="width: 1000px" id="content">
   <h2>some title here</h2>
   <p>some content here</p>
</div>

<script>
var div = document.getElementById('content');
var el = div.style.width;
document.write ("SomeText");
if(el === '1000px')
{
    document.body.style.backgroundColor="red";
}
else
{
     document.body.style.backgroundColor="blue";
}
</script>

请记住，如果用户关闭了 JavaScript，这将破坏您的风格。没什么大不了的，但值得记住。