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

我有一个依赖于浏览器窗口宽度的表单结构：为简化问题，假设它有三个级别（从最宽的情况开始）：让子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时，即使浏览窗口仍将宽度设置为1000px，form也会自动重新设置为第三个布局。

可能吗？

来源

2013-07-29 TheFrost

不，你设想的方式是不可能的。媒体查询适用于设备，而不是HTML元素。但请参阅http://stackoverflow.com/questions/15047605/using-iframe-to-apply-css-media-queries-to-block-elements或http://stackoverflow.com/questions/12251750/can-media -queries调整大小为基础的上-A-DIV-元素代替的最屏。 – 2013-07-29 06:04:03

谢谢你，我发现'css-element-queries'项目。它正是我想要的，除了使用'@ element'（我期望的）之外，它使用'attributes'。 – TheFrost

由于在受到质疑后@ torazaburo的评论的第二个链接，我找到了完美的解决方案：

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

然而这是非常年轻的项目它仍然有一些漏洞ities（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-29 13:48:34 TheFrost

好的回答@TheFrost。 – thomasfedb

我创建了一个CSS容器查询（又名元素查询）填充：https：//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/

来源

2013-07-29 05:09:19 jerrylow

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

回答

相关问题