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

Question

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

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

Answer 1

CSS不适合这项工作。它不是脚本语言，对conditionals的功能使用很少。那很好！应该是这样的。幸运的是我们有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，这会破坏您的风格。不是什么大问题，但值得记住。