讓子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屬性取決於父元素的大小（如媒體查詢取決於瀏覽器寬度）

回答

相關問題