Responsive CSS-Stile inline on the fly

Ich arbeite derzeit an einer stark designorientierten Website, die auf WordPress CMS basiert.

Derzeit habe ich ein responsives Haupt-Stylesheet, das extern für das Kern-CSS verlinkt ist. Da die Website stark auf Abstände und Ausrichtung von Text und Bildern angewiesen ist, ist es notwendig geworden, Inline-CSS-Verwendung hinzuzufügen style= HTML, um manchmal das externe CSS zu überschreiben.

Das Problem, das ich habe, ist, dass in den meisten Fällen bestimmte Elemente wie Ränder in der mobilen Ansicht einen anderen Prozentsatz haben müssen als in der Desktop-Ansicht, um die visuelle Komposition auszugleichen. Gibt es eine Möglichkeit hinzuzufügen responsiveness zum Inline-CSS basierend auf der Bildschirmbreite, wie dies in einem externen Stylesheet möglich ist?

Bisher kann ich mir vorstellen, dies zu erreichen, indem jQuery das externe CSS basierend auf der Bildschirmbreite des Benutzers ändert. Dies würde jedoch bedeuten, dass strenge Regeln im JS festgelegt werden, z sie zu 90%.

Wenn es möglich wäre, dies inline im HTML-Stil zu tun, würde dies meinem Kunden eine strengere Kontrolle und mehr Flexibilität geben. Glücklicherweise kennt sich mein Kunde gut mit CSS aus.

Sie können immer einen CSS-Block inline mit einem Stilelement hinzufügen:

<style type="text/css">
@media screen and (min-width:800px) {
   .inlineOverride {
     /* add more styles here */
   }       
}    
</style>

<div class="inlineOverride">
</div>

Es ist erwähnenswert, dass HTML5 eine eingeführt hat begrenzt -Attribut, das Sie für das Stilelement festlegen können, um die angegebenen Stilinformationen auf das übergeordnete Element des Stilelements und die Nachkommen dieses Elements zu beschränken.

Es wird noch nicht allgemein unterstützt, sollte sich also nicht darauf verlassen, aber es könnte langfristig nützlich sein, um zu verhindern, dass solche Inline-Stile in andere Teile des Dokuments “durchsickern”.

Diese Frage/Antwort könnte für Sie hilfreich sein (lesen Sie sie gründlich durch). Verwenden Sie @media, um Ihre CSS-Eigenschaften an die Gerätebreite und -höhe anzupassen. Was bedeuten @media screen und (max-width: 1024px) in CSS?

In modernen Browsern können Sie dies (irgendwie) archivieren, indem Sie benutzerdefinierte CSS-Eigenschaften (Css-Variablen) verwenden:

@media (max-width: 1100px) {
  * {
    color: var(--color-sm)
  }
}

<a style="--color-sm: #11f">Text</a>

(Erweitern Sie das Snippet oder öffnen Sie es auf der ganzen Seite, um das andere Verhalten zu erhalten.)

(Farbe wird zur Vereinfachung der Darstellung verwendet, verwenden Sie einfach den Rand oder eine andere CSS-Eigenschaft entsprechend Ihrem Anwendungsfall.)