Medienabfragen ermöglichen die bedingte Anwendung von CSS-Stilen basierend auf Medientypen wie Bildschirm und Druck sowie den Bedingungen von Medienfunktionen wie Ansichtsfenster und Gerätehöhe und -breite. Sie sind Teil der W3C CSS3-Spezifikation.
Gibt es eine Möglichkeit, beim Schreiben einer CSS-Medienabfrage mehrere Bedingungen mit "ODER" -Logik anzugeben? Ich versuche so etwas zu tun: /* This doesn't work */ @media screen and (max-width: 995px OR max-height: 700px) {
Was ist der Unterschied zwischen screenund only screenbei Medienabfragen? <link media="screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" /> <link media="only screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" /> Warum müssen wir verwenden only screen?...
Ich habe einige Nachforschungen zu Medienabfragen angestellt und verstehe immer noch nicht ganz, wie ich Geräte bestimmter Größen ansprechen soll. Ich möchte auf Desktop, Tablet und Mobile abzielen können. Ich weiß, dass es einige Unstimmigkeiten geben wird, aber es wäre schön, ein generisches...
Ich verwende Bootstrap 3, um ein ansprechendes Layout zu erstellen, in dem ich einige Schriftgrößen entsprechend der Bildschirmgröße anpassen möchte. Wie kann ich Medienabfragen verwenden, um diese Art von Logik zu
Ich möchte Medienabfragen verwenden, um die Größe von Elementen basierend auf der Größe eines divElements zu ändern, in dem sie sich befinden. Ich kann die Bildschirmgröße nicht verwenden, da sie divnur wie ein Widget auf der Webseite verwendet wird und ihre Größe variieren kann. Aktualisieren...
Ich muss Bannerbilder dynamisch in eine HTML5-App laden und möchte ein paar verschiedene Versionen, die den Bildschirmbreiten entsprechen. Ich kann die Bildschirmbreite des Telefons nicht richtig bestimmen. Daher kann ich mir nur vorstellen, Hintergrundbilder eines div hinzuzufügen und mit @media...
Ich habe diesen Code in einer CSS-Datei gefunden, die ich geerbt habe, aber ich kann keinen Sinn daraus machen: @media screen and (max-width: 1024px){ img.bg { left: 50%; margin-left: -512px; } } Was passiert konkret in der ersten
Ich muss einige HTML-Seiten für iPhone / Android-Handys entwickeln, aber was ist der Unterschied zwischen max-device-widthund max-width? Ich muss verschiedene CSS für verschiedene Bildschirmgrößen verwenden. @media all and (max-device-width: 400px) @media all and (max-width: 400px) Was ist der...
Ich habe dieses @mediaSetup: HTML : <head> <meta name="viewport" content="width=device-width, user-scalable=no" /> </head> CSS : @media screen and (min-width: 769px) { /* STYLES HERE */ } @media screen and (min-device-width: 481px) and (max-device-width: 768px) { /*...
Ich habe eine große Site, die in ASP.NET MVC mit der Razor View Engine ausgeführt wird. Ich habe ein Basis-Stylesheet, das das gesamte generische Styling für die gesamte Site enthält. Gelegentlich habe ich jedoch seitenspezifische Stile, die in <head>der Seite enthalten sind - normalerweise...
Ich verwende Twitter Bootstrap für ein Projekt. Neben den Standard-Bootstrap-Stilen habe ich auch einige meiner eigenen hinzugefügt //My styles @media (max-width: 767px) { //CSS here } Ich verwende jQuery auch, um die Reihenfolge bestimmter Elemente auf der Seite zu ändern, wenn die Breite des...
In der Datei styles.css verwende ich Medienabfragen, die beide eine Variation von: /*--[ Normal CSS styles ]----------------------------------*/ @media only screen and (max-width: 767px) { /*--[ Mobile styles go here]---------------------------*/ } Die Größe der Websites wird in einem normalen...
Unterstützt IE8 die folgende CSS-Medienabfrage nicht: @import url("desktop.css") screen and (min-width: 768px); Wenn nicht, wie wird alternativ geschrieben? Das gleiche funktioniert gut in Firefox. Probleme mit dem folgenden Code? @import url("desktop.css") screen; @import url("ipad.css") only...
Ich bin neu hier bei dieser Firma und wir haben ein Produkt, das kilometerlange CSS verwendet. Ich versuche, ein druckbares Stylesheet für unsere App zu erstellen, habe jedoch Probleme mit background-colorin @media print. @media print { #header{display:none;} #adwrapper{display:none;} td {...
In der Dokumentation zu Bootstrap 3-Medienabfragen heißt es: Wir verwenden die folgenden Medienabfragen in unseren Less-Dateien, um die wichtigsten Haltepunkte in unserem Rastersystem zu erstellen. Extra kleine Geräte (Telefone mit weniger als 768 Pixel): Keine Medienabfrage, da dies die...
In JavaScript kann der Orientierungsmodus erkannt werden mit: if (window.innerHeight > window.innerWidth) { portrait = true; } else { portrait = false; } Gibt es jedoch eine Möglichkeit, die Ausrichtung nur mit CSS zu erkennen? Z.B. etwas wie: @media only screen and (width > height) { ......
Ich versuche, CSS3-Medienabfragen zu verwenden, um eine Klasse zu erstellen, die nur angezeigt wird, wenn die Breite größer als 400 Pixel und kleiner als 900 Pixel ist. Ich weiß, dass dies wahrscheinlich sehr einfach ist und mir etwas Offensichtliches fehlt, aber ich kann es nicht herausfinden. Was...
Ich versuche, CSS-Variablen in Medienabfragen zu verwenden, und es funktioniert nicht. :root { --mobile-breakpoint: 642px; } @media (max-width: var(--mobile-breakpoint)) {
Das iPhone 5 hat einen längeren Bildschirm und erfasst nicht die mobile Ansicht meiner Website. Was sind die neuen Responsive Design-Abfragen für das iPhone 5 und kann ich sie mit vorhandenen iPhone-Abfragen kombinieren? Meine aktuelle Medienabfrage lautet: @media only screen and...
Gibt es eine Möglichkeit, die Gerätebreite des Benutzers im Gegensatz zur Breite des Ansichtsfensters mithilfe von Javascript zu ermitteln? CSS-Medienabfragen bieten dies, wie ich sagen kann @media screen and (max-width:640px) { /* ... */ } und @media screen and (max-device-width:960px) {...