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

Question

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

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成div具有1000px宽度,CSS将适用于特定form这是用来风格第一次布局相同的属性(max-width:1000px).当这div将缩小到800px了form应该自动restyle即使当浏览窗口依然宽度为第三布局1000px.

可能吗？

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宽或小的元素内,则将具有紫色背景.

完后还有,

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

更多关于这个:

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