Zapytanie o media CSS3 - szerokość kontenera zamiast ekranu?

Question

Jeszcze nie widziałem tego pytania zadawanego tutaj, ale zastanawiałem się, czy ktoś wie, czy możliwe jest zapytanie o media oparte na kontenerze lub elemencie nadrzędnym opartym na jego szerokości. Przypadek ten dotyczy sytuacji, gdy masz menu, które pojawia się po lewej stronie i zmniejsza rozmiar głównego kontenera Windows. Oto przykład stronę internetową, gdzie można zobaczyć menu pojawia otwarte ale zawartość na stronie nie można zmienić na podstawie jego nowej szerokości

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

Answer 1

Myślę, że chcesz coś innego niż to, co prosisz.

Zapytania o media mają na celu zapytanie o coś konkretnego dla urządzenia (media), którego używasz, a nie animacje czy inne elementy wizualne.

Aby odbudować przykład, który tu zamieściłeś, jest dość prosty do przebudowania, ale ma (z wyjątkiem jego reakcji) nic wspólnego z zapytaniami o media.

Utworzono normalną stronę z dwoma stanami. W jednym stanie widoczna jest tylko zawartość, aw drugim stan menu jest widoczne, a zawartość jest częściowo (zajęta przez szerokość menu) przeniesiona poza ekran.

Deklarujesz, który element i która opcja ma być przejściowa. Oto przykład, gdzie skonfigurować, że zmiana szerokość lub margines elementu rozpocznie animację, która trwa 3s:

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

Przełączanie pomiędzy tymi dwoma stanami odbywa się poprzez dodanie CSS-klasę i animacji widzisz jest skonfigurowany przez ustawienie CSS3 o nazwie przejście.

Radzę przeczytać coś takiego https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_transitions

FYI: I odbudować coś takiego stronie pokazałeś, tak jak udowodnić koncepcji: http://jsfiddle.net/W3PF4/

Answer 2

Nie można nie zapytanie o media w ten sposób, ale kim jesteś prosić o można zrobić z css. Robię to dla mojej witryny, a faceci na sitepoint trochę pomogli - Zobacz wpis 11 tutaj: http://www.sitepoint.com/forums/showthread.php?828454-CSS-Absolute-Positioning-Troubles&p=5061986&viewfull=1#post5061986

Po otwarciu paska bocznego przycina zawartość po prawej stronie & to centra treści w środku. Oczywiście można to zrobić bez zawartości centrowania i zrobi to, co zamierzacie.

Answer 3

Też się nad tym zastanawiałem. Do tej pory byłem pod wrażeniem podejścia Andy'ego Hume'a: http://blog.andyhume.net/responsive-containers/https://github.com/ahume/selector-queries/