webentwicklung-frage-antwort-db.com.de

Können Medienabfragen basierend auf einem div-Element anstelle des Bildschirms geändert werden?

Ich möchte Medienabfragen verwenden, um die Größe der Elemente basierend auf der Größe eines div-Elements, in dem sie sich befinden, zu ändern. Ich kann die Bildschirmgröße nicht verwenden, da die div nur wie ein Widget innerhalb der Webseite verwendet wird und deren Größe variieren kann.

Aktualisieren

Anscheinend wird daran jetzt gearbeitet: https://github.com/ResponsiveImagesCG/cq-demos

237
Zubair

Nein, Medienabfragen sind nicht dafür ausgelegt, auf Elementen auf einer Seite zu basieren. Sie sind so konzipiert, dass sie auf der Grundlage von Geräten oder Medientypen arbeiten (daher werden sie als media -Abfragen bezeichnet). width , height und andere dimensionbasierte Medienfunktionen beziehen sich alle auf die Abmessungen des Viewports oder des Bildschirms des Geräts in bildschirmbasierten Medien. Sie können nicht verwendet werden, um auf ein bestimmtes Element auf einer Seite zu verweisen.

Wenn Sie Stile abhängig von der Größe eines bestimmten div-Elements auf Ihrer Seite anwenden müssen, müssen Sie JavaScript verwenden, um Änderungen der Größe dieses div-Elements anstelle von Medienabfragen zu beobachten.

174
BoltClock

Ich habe gerade ein Javascript-Shim erstellt, um dieses Ziel zu erreichen. Werfen Sie einen Blick, wenn Sie wollen, es ist ein Proof-of-Concept, aber seien Sie vorsichtig: Es ist eine frühe Version und muss noch ein wenig Arbeit sein.

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

93
Marc J. Schmidt

Eine Medienanfrage innerhalb eines Iframes kann als Elementabfrage fungieren. Ich habe das erfolgreich umgesetzt. Die Idee kam aus einem kürzlich veröffentlichten Beitrag über Responsive Ads von Zurb. Kein Javascript!

30
haddnin

Dies ist derzeit mit CSS allein nicht möglich, wie @BoltClock in der akzeptierten Antwort schrieb, aber Sie können dies umgehen, indem Sie JavaScript verwenden.

Ich habe eine Containerabfrage (auch als Elementabfrage bezeichnet) erstellt, um dieses Problem zu lösen. Es funktioniert ein bisschen anders als andere Skripte, sodass Sie den HTML-Code Ihrer Elemente nicht bearbeiten müssen. Alles, was Sie tun müssen, ist das Skript einzubinden und so in Ihrem CSS zu verwenden:

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

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

22
ausi

Ich bin vor einigen Jahren auf das gleiche Problem gestoßen und habe die Entwicklung eines Plugins finanziert, das mir bei meiner Arbeit helfen soll. Ich habe das Plugin als Open-Source veröffentlicht, damit auch andere davon profitieren können, und Sie können es auf Github packen: https://github.com/eqcss/eqcss

Es gibt einige Möglichkeiten, verschiedene responsive Stile anzuwenden, basierend auf dem, was wir über ein Element auf der Seite wissen können. Hier sind ein paar Elementabfragen, mit denen Sie das EQCSS-Plugin in CSS schreiben können:

@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 */
  }
}

Welche Bedingungen werden für responsive Styles mit EQCSS unterstützt?

Gewichtungsabfragen

  • minimale Breite in px
  • minimale Breite in %
  • max-Breite in px
  • max-Breite in %

Höhenabfragen

  • min-height in px
  • mindesthöhe in %
  • maximalhöhe in px
  • max-Höhe in %

Abfragen zählen

  • min-Zeichen
  • max Zeichen
  • min-Linien
  • maximale Anzahl an Zeilen
  • min-Kinder
  • max-Kinder

Spezielle Selektoren

In EQCSS-Elementabfragen können Sie auch drei spezielle Selektoren verwenden, mit denen Sie Ihre Stile spezifischer anwenden können:

  • $this (das Element bzw. die Elemente, die der Abfrage entsprechen)
  • $parent (die übergeordneten Elemente der Elemente, die der Abfrage entsprechen)
  • $root (das Wurzelelement des Dokuments, <html>)

Mit Element-Abfragen können Sie Ihr Layout aus individuell ansprechbaren Design-Modulen zusammenstellen, die jeweils ein wenig "Selbsterkenntnis" darüber besitzen, wie sie auf der Seite angezeigt werden.

Mit EQCSS können Sie ein Widget so gestalten, dass es von 150 Pixeln Breite bis zu 1000 Pixeln Breite gut aussieht. Dann können Sie dieses Widget in jeder Seitenleiste mit jeder beliebigen Vorlage (auf jeder Website) und in jeder Seitenleiste ablegen 

13
innovati

Die Frage ist sehr vage. Wie BoltClock sagt, kennen Medienabfragen nur die Abmessungen des Geräts. Sie können jedoch Medienabfragen in Kombination mit Abseilerselektoren verwenden, um Anpassungen vorzunehmen.

.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;
    }
}

Die einzige andere Lösung erfordert JS.

9
cimmanon

Ich kann nur glauben, dass Sie mit css erreichen können, was Sie wollen, indem Sie einen Flüssigkeitsbehälter für Ihr Widget verwenden. Wenn die Breite Ihres Containers ein Prozentsatz des Bildschirms ist, können Sie abhängig von der Breite Ihres Containers Medienabfragen verwenden, um die Formatierung vorzunehmen, da Sie jetzt für die Abmessungen jedes Bildschirms wissen, welche Abmessungen der Container hat. Angenommen, Sie entscheiden sich dafür, den Container zu 50% der Bildschirmbreite zu machen. Bei einer Bildschirmbreite von 1200px wissen Sie dann, dass Ihr Container 600px ist

.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
Roumelis George

Ich habe auch über Medienfragen nachgedacht, aber dann habe ich Folgendes gefunden:

Erstellen Sie einfach einen Wrapper <div> mit einem prozentualen Wert für padding-bottom wie folgt:

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

Es ergibt sich ein <div> mit einer Höhe, die 75% der Breite des Containers entspricht (ein Seitenverhältnis von 4: 3).

Diese Technik kann auch mit Medienabfragen und etwas Ad-hoc-Wissen über das Seitenlayout gekoppelt werden, um die Steuerung noch feiner zu gestalten.

Es ist genug für meine Bedürfnisse. Was für Ihre Bedürfnisse auch ausreichend sein könnte.

3
Hendy Irawan

Für meine habe ich es gemacht, indem ich die maximale Breite des divs eingestellt habe. Daher wird das kleine Widget nicht beeinflusst, und die Größe des großen Widgets wird aufgrund des max-width-Stils geändert. 

  // assuming your widget class is "widget"
  .widget {
    max-width: 100%;
    height: auto;
  }
0
Jacky Choo