CSS3媒體查詢 - 容器的寬度而不是屏幕？

我還沒有看到這個問題在這裏問，但我想知道是否有人知道是否有可能有一個基於它的寬度的容器或父元素的媒體查詢。用戶案例是當你有一個菜單從左邊彈出並減小主窗口容器的大小。下面是一個例子網站，你可以看到屏幕上彈出菜單打開，但頁面上的內容不能改變基於其新的寬度CSS3媒體查詢 - 容器的寬度而不是屏幕？

http://tympanus.net/Tutorials/FullscreenBookBlock/

來源

2013-01-23 2ne

http://stackoverflow.com/questions/12251750/can-media-queries-resize-based-on-a-div-element-instead-of-屏幕這可能嗎？不，這是不可能的。 – BoltClock

所以這不能用css3來完成，直到@element屬性被添加。如果任何人正在使用高效的javascript或jquery方法來處理這個用例，那麼我會接受這個答案 – 2ne

我仍然在積極尋找這個近乎一年的問題的答案，今天我發現這個：http：// codepen。 io/2ne/pen/zxBVjR？編輯= 110我不知道它是如何工作的，但它看起來確實回答了這個問題 – 2ne

我想你想的東西比你問什麼不同。

媒體查詢旨在查詢特定於您使用的設備（媒體）的某些內容，而不是執行動畫或其他視覺材料。

重建你在這裏發佈的例子相當簡單的重建，但已經（除了它的響應）與媒體查詢無關。

他們創建了一個具有兩種狀態的普通頁面。在一種狀態下，只有內容可見，而在另一種狀態下菜單是可見的，並且內容部分地（取決於菜單的寬度）移出屏幕。

您聲明哪個元素和哪個選項應該是過渡的。下面是一個例子，其中，I配置改變元件的寬度或餘量將啓動的動畫這需要3秒：在這兩種狀態之間

div { 
    transition: width 3s, margin 3s; 
    -moz-transition: width 3s, margin 3s; 
    -webkit-transition: width 3s, margin 3s; 
    -o-transition: width 3s, margin 3s; 
}

繃通過添加一個CSS級和動畫完成您看到的是由名爲轉換的CSS3設置配置的。

我建議你閱讀像https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_transitions

FYI：我重建類似的網站，你表現，就像一個證明的概念：http://jsfiddle.net/W3PF4/

來源

2013-01-23 13:41:32 SimonSimCity

不，你不能媒體查詢方式，但你是什麼要求可以用css來完成。我一直在爲我的網站做這件事，並在sitepoint的傢伙幫了很大的忙 - 看到帖子11在這裏：http://www.sitepoint.com/forums/showthread.php?828454-CSS-Absolute-Positioning-Troubles&p=5061986&viewfull=1#post5061986

當邊欄打開它把內容擠到右邊&它的內容中心內。當然，你可以做到這一點，沒有集中的內容，它會做你想做的。

來源

2013-01-23 13:42:00

我也一直在研究這個。到目前爲止，我對安迪休謨的方法印象深刻http://blog.andyhume.net/responsive-containers/https://github.com/ahume/selector-queries/

來源

2013-07-01 15:56:21