12

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

  1. 左边是字段标签，中间是输入字段，右边是字段描述
  2. 左侧字段标签，中间输入字段，输入字段下方字段描述
  3. 顶部字段标签，中间输入字段，底部字段描述

它是通过这样的方式完成的：

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

我要求的是为所有元素获得相同的功能，因此当我将一个具有宽度的元素form放入其中时，CSS 将应用于用于设置第一个布局 () 样式的特定相同属性。即使浏览窗口的宽度仍设置为.div1000pxformmax-width:1000pxdiv800pxform1000px

可能吗？

4

2 回答 2

11

感谢@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 我在日常项目中使用它。

更多关于这个：

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

于 2013-07-29T13:48:34.360 回答
0

不是说我知道是否就直接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/

于 2013-07-29T05:09:19.603 回答