Czy zapytania o media mogą zmieniać rozmiar na podstawie elementu div zamiast ekranu?

Chciałbym użyć zapytań o media do zmiany rozmiaru elementów w oparciu o rozmiar div elementu, w którym się znajdują. Nie mogę użyć rozmiaru ekranu, ponieważ div jest używany jak widżet na stronie internetowej, a jego rozmiar może się różnić.

Update

Wygląda na to, że jest już nad tym praca: https://github.com/ResponsiveImagesCG/cq-demos

Author: Felix Geenen, 2012-09-03
Source

9 answers

Nie, zapytania o media nie są zaprojektowane do pracy w oparciu o elementy na stronie. Są one zaprojektowane do pracy w oparciu o urządzenia lub typy nośników (stąd nazywane są zapytaniamimedia ). width, height, inne funkcje multimediów opartych na wymiarach odnoszą się do wymiarów portu widokowego lub ekranu urządzenia w mediach opartych na ekranie. Nie mogą być używane do odwoływania się do określonego elementu na stronie.

Jeśli musisz zastosować style w zależności od wielkości niektóre elementy div na twojej stronie, musisz użyć JavaScript, aby obserwować zmiany rozmiaru tego elementu div zamiast zapytań o media.

 163
Author: BoltClock,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-05-10 02:23:33

Właśnie stworzyłem JavaScript shim, aby osiągnąć ten cel. Spójrz, jeśli chcesz, jest to dowód-of-concept, ale uważaj: jest to wczesna wersja i nadal wymaga trochę pracy.

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

 84
Author: Marc J. Schmidt,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-06-02 03:29:27

Zapytanie o Media wewnątrz ramki iframe może funkcjonować jako zapytanie o element. Udało mi się to wdrożyć. Pomysł zrodził się z ostatniego postu o Responsive Ads autorstwa Zurb. No Javascript!

 29
Author: haddnin,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-07-16 19:25:53

Obecnie nie jest to możliwe z samym CSS, jak napisał @BoltClock w zaakceptowanej odpowiedzi, ale możesz obejść to za pomocą JavaScript.

Stworzyłem zapytanie kontenera (aka zapytanie elementu) prolyfill, aby rozwiązać ten rodzaj problemu. Działa nieco inaczej niż inne skrypty, więc nie musisz edytować kodu HTML swoich elementów. Wszystko, co musisz zrobić, to dołączyć skrypt i użyć go w swoim CSS w ten sposób: 

.element:container(width > 99px) {
    /* If its container is at least 100px wide */
}

Https://github.com/ausi/cq-prolyfill

 17
Author: ausi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-30 06:39:07

Wpadłem na ten sam problem kilka lat temu i sfinansowałem rozwój wtyczki, aby pomóc mi w mojej pracy. Wydałem wtyczkę jako open-source, aby inni mogli z niej korzystać, a Ty możesz ją pobrać na Github: https://github.com/eqcss/eqcss

Istnieje kilka sposobów na zastosowanie różnych stylów responsywnych w oparciu o to, co możemy wiedzieć o elemencie na stronie. Oto kilka zapytań elementowych, które wtyczka eqcss pozwoli Ci pisać CSS: 

@element 'div' and (condition) {
  $this {
    /* Do something to the 'div' that meets the condition */
  }
  .other {
    /* Also apply this CSS to .other when 'div' meets this condition */
  }
}

Jakie warunki są obsługiwane dla stylów responsywnych z EQCSS?

Zapytania O Wagę

  • min-Szerokość w px
  • min-Szerokość w %
  • max-szerokość w px
  • max-szerokość w %

Zapytania Wysokościowe

  • min-Wysokość w px
  • min-Wysokość w %
  • max-wysokość w px
  • max-wysokość w %

Count Queries

  • min-znaki
  • max-znaki
  • linie min
  • max-linie
  • min-dzieci
  • max-dzieci

Selektory Specjalne

Wewnątrz zapytań EQCSS element można również użyć trzech specjalnych selektorów, które pozwalają dokładniej zastosować style:

  • $this (element(Y) pasujący do zapytania)
  • $parent (element (- Y) nadrzędny (- e) elementu (- ów) pasującego (- ych) do query)
  • $root (główny element dokumentu, <html>)

Zapytania o elementy pozwalają skomponować układ z indywidualnie responsywnych modułów projektowych, każdy z odrobiną "samoświadomości" o tym, jak są wyświetlane na stronie.

Z EQCSS możesz zaprojektować jeden widżet tak, aby wyglądał dobrze od 150px szerokości do 1000px szerokości, a następnie możesz śmiało upuścić ten widżet na dowolnym pasku bocznym na dowolnej stronie za pomocą dowolnego szablonu (na dowolnej stronie) i

 13
Author: innovati,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-11-12 19:26:12

Pytanie jest bardzo niejasne. Jak mówi BoltClock, zapytania o media znają tylko wymiary urządzenia. Można jednak używać zapytań o media w połączeniu z selektorami descendera do wykonywania korekt.

.wide_container { width: 50em }

.narrow_container { width: 20em }

.my_element { border: 1px solid }

@media (max-width: 30em) {
    .wide_container .my_element {
        color: blue;
    }

    .narrow_container .my_element {
        color: red;
    }
}

@media (max-width: 50em) {
    .wide_container .my_element {
        color: orange;
    }

    .narrow_container .my_element {
        color: green;
    }
}

Jedyne inne rozwiązanie wymaga JS.

 9
Author: cimmanon,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-09-07 17:49:13

Jedynym sposobem, w jaki mogę myśleć, że możesz osiągnąć to, co chcesz wyłącznie z css, jest użycie kontenera płynu dla widżetu. Jeśli szerokość kontenera jest procentem ekranu, możesz użyć zapytań o media, aby stylować w zależności od szerokości kontenera, ponieważ teraz będziesz wiedział, jakie są wymiary kontenera dla każdego ekranu. Załóżmy na przykład, że zdecydujesz się na 50% szerokości ekranu kontenera. Wtedy dla szerokości ekranu 1200px wiesz, że Twój kontener is 600px 

.myContainer {
  width: 50%;
}

/* you know know that your container is 600px 
 * so you style accordingly
*/
@media (max-width: 1200px) { 
  /* your css for 600px container */
}
 3
Author: Roumelis George,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-06-17 09:05:29

Myślałem też o zapytaniach o media, ale potem znalazłem to:

Wystarczy utworzyć wrapper {[2] } z wartością procentową dla padding-bottom, tak: 

div {
  width: 100%;
  padding-bottom: 75%;
  background:gold; /** <-- For the demo **/
}
<div></div>

Spowoduje to <div> z wysokością równą 75% szerokości kontenera (proporcje 4:3).

Ta technika może być również połączony z zapytaniami o media i odrobiną wiedzy ad hoc na temat układu strony, aby jeszcze bardziej precyzyjnie kontrolować.

Wystarczy na moje potrzeby. Co może wystarczyć na twoje potrzeby.
 2
Author: Hendy Irawan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-07-30 23:46:37

Dla mojego zrobiłem to, ustawiając div ' s max szerokość, stąd dla małych widget nie będzie miało wpływu i duży widget jest zmieniany ze względu na max-szerokość stylu. 

  // assuming your widget class is "widget"
  .widget {
    max-width: 100%;
    height: auto;
  }
 0
Author: Jacky Choo,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-01-24 08:33:34