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

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

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

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

@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 即使浏览窗口仍设置为宽度，也应自动重新设置为第3个布局 1000px。

可能吗？

5043

2017-07-29 01:39

起源

不，你想象的方式是不可能的。媒体查询适用于设备，而不适用于HTML元素。但是看 stackoverflow.com/questions/15047605/...，要么 stackoverflow.com/questions/12251750/...。

谢谢你，我找到了 css-element-queries 项目。它完全符合我的要求，除了使用 @element （我的预期），它使用 attributes。 - TheFrost

答案:

感谢@ 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 宽或小。

完后还有，

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

2017-07-29 13:48

好的答案@TheFrost。 - thomasfedb

我也创建了一个CSS容器查询（也就是元素查询）： github.com/ausi/cq-prolyfill - ausi

不是我知道如果直接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/

2017-07-29 05:09

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

答案:

热门问题

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