Question

我有一个依赖于浏览器窗口宽度的表单结构：为了简化问题，假设它有三个级别（从最宽的情况开始）：

左侧的字段标签，中间的输入字段和右侧的字段说明
左侧的字段标签，中间的输入字段和输入字段下方的字段说明
顶部的字段标签，中间的输入字段和底部的字段说明

这是通过以下方式完成的：

@media (max-width:1000px) { /* code for 1. */ }
@media (max-width:900px) { /* code for 2. */ }
@media (max-width:800px) { /* code for 3. */ }

我要求的是为所有元素提供相同的功能，因此当我将form放入div宽度为1000px时，CSS将应用于用于设置第一个布局（form）样式的特定max-width:1000px个相同属性。如果此div缩小为800px，即使浏览窗口的宽度设置为form，1000px也会自动重新设置为第3个布局。

有可能吗？

Answer 1

感谢@ torazaburo在问题帖子中的第二个链接，我找到了完美的解决方案：

https://github.com/marcj/css-element-queries

然而，这是一个非常年轻的项目仍然有一些漏洞（2013年7月29日），但也有潜力。它不是基于@element查询，而是基于attributes。例如：

.fooDiv[min-width="1000px"] .form { /* code for 1. */ }
.fooDiv[min-width="900px"] .form { /* code for 2. */ }
.fooDiv[min-width="800px"] .form { /* code for 3. */ }

这些属性由侦听器设置，因此它们适用于.fooDiv大小的每次更改。

另一个项目（与SASS / SCSS不兼容），

https://github.com/Mr0grog/element-query

将按以下方式运作：

.test-element:media(max-available-width: 400px) {
    background: purple;
}

在上面的CSS中，如果.test-element位于400px宽或更小的元素内，则{{1}}将具有紫色背景。

还有一个，

https://github.com/tysonmatanich/elementQuery 我在日常工程中使用它。

更多关于此事：

http://coding.smashingmagazine.com/2013/06/25/media-queries-are-not-the-answer-element-query-polyfill/

Answer 2

不是我知道如果直接css。你可以结合使用jQuery来实现这一目标。 jQuery的一个例子：

$(document).ready(function() {
    box_size();

    $(window).resize(function() {
        box_size();
    });

    function box_size() {
        var window_width = $(window).width();

        $('.box').removeClass('break-one').removeClass('break-two').removeClass('break-three');

        if (window_width <= 1000 && window_width > 900) {
            $('.box').addClass('break-one');
        }
        else if (window_width <= 900 && window_width > 800) {
            $('.box').addClass('break-two');
        }
        else if (window_width <= 800) {
            $('.box').addClass('break-three');
        }
    }
});

该函数被调用两次。加载时加载以检查大小，并在浏览器调整大小时再次加载。

的CSS：

.box {
    color: black;
}

.box.break-one {
    color: red;
}

.box.break-two {
    color: blue;
}

.box.break-three {
    color: yellow;
}

当然可以在jsfiddle中看到它：http://jsfiddle.net/PWbvY/

使子CSS属性依赖于父元素大小（如媒体查询取决于浏览器宽度）

2 个答案: