Tag: media-queries

Media queries ermöglichen die bedingte Anwendung von CSS-Stilen auf der Basis von Medientypen wie screen und print, und die Bedingungen des media-features, wie der viewport und Gerät in Höhe und Breite. Sie sind Teil des W3C CSS3-Spezifikation.

Emulations-Medienabfragen im Chrome-Gerätemodus funktionieren nicht

Anzahl der Antworten 2 Antworten
Aus irgendeinem Grund Gerät-emulation-Modus ist nicht das Lesen meines media queries. Es funktioniert auf anderen Seiten, einschließlich meiner eigenen Seiten ist, den ich mit bootstrap, aber es funktioniert nicht auf media-queries benutze ich von Grund auf (Klick

Soll ich Max-Device-Breite oder Max-Breite verwenden?

Anzahl der Antworten 3 Antworten
Mit CSS media queries können Sie max-device-width Ziel einer Geräte-Breite (wie ein iPhone oder Android-Gerät) und/oder eine max-width zielt auf eine Breite Seite. Wenn Sie max-device-widthwenn Sie ändern Sie die Größe des browser-Fenster auf Ihrem desktop, die

Wie stellen Sie Querformat- und Querformat-Medienabfragen in CSS ein?

Anzahl der Antworten 2 Antworten
Hier ist mein Medien-Abfrage: @media screen and (min-device-width: 768px) and (max-device-width: 1824px) and (orientation : portrait){ .hidden-desktop { display: inherit !important; } .visible-desktop { display: none !important ; } .visible-tablet { display: inherit !important; } .hidden-tablet {

Bootstrap 3 Breakpoints und Medienabfragen

Anzahl der Antworten 10 Antworten
Auf http://getbootstrap.com/css/ es sagt: Verwenden wir die folgenden media queries zu erstellen, die Schlüssel-Haltepunkte in unser grid-system. Extra kleine Geräte (Handys, bis zu 480px): Keine Medien-Abfrage, da diese der Standard in der Bootstrap Kleinen Geräten (tablets 768px):

Unterschied zwischen Breite und Gerätebreite in CSS-Medienabfragen

Anzahl der Antworten 5 Antworten
Was ist der Unterschied (in einfachen Worten) zwischen height und width, device-width und device-height? InformationsquelleAutor der Frage sIla | 2011-04-19

CSS-Medienabfragen und JavaScript-Fensterbreite stimmen nicht überein

Anzahl der Antworten 6 Antworten
Für eine reaktionsschnelle Vorlage, ich habe ein media query in meinem CSS: @media screen and (max-width: 960px) { body{ /* something */ background:red; } } Und habe ich eine jQuery-Funktion auf Größe ändern, um die log-Breite: $(window).resize(function()

iPhone 6 und 6 Plus Media Queries

Anzahl der Antworten 7 Antworten
Kennt jemand bestimmte Bildschirmgrößen zu target-media queries für iPhone 6 und 6 Plus? Auch die icon-Größen und splash-screens? InformationsquelleAutor der Frage MattT | 2014-09-10

Warum ist die window.width kleiner als die Breite des Darstellungsbereichs in Medienabfragen?

Anzahl der Antworten 7 Antworten
Ich bin ziemlich verwirrt und noch nicht sicher, wie zu erklären, dies in richtige Worte. So weit ich verwendet habe, und meine media queries mit Haltepunkt. Eine gebrauchte Haltepunkt-variable sieht wie z.B.: $menustatictofixed: min-width 900px; $breakpoint-ems auf

Erweitern von Selektoren innerhalb von Medienanfragen mit Sass

Anzahl der Antworten 6 Antworten
Habe ich ein Element der Klasse und eine kompakte "modifier" - Klasse: .item { ... } .item.compact { /* styles to make .item smaller */ } Ist dies in Ordnung. Allerdings würd ich gern noch eine @media

Wie man das Bootstrap-responsive Layout auf IE8 macht

Anzahl der Antworten 10 Antworten
Ich habe Suche für eine Weile und einige Leute gefunden habe es funktioniert, aber keiner von Ihnen bieten alle code-Beispiele. Ich habe versucht, Ihre Anregungen, aber es funktionierte nicht für mich. Durch die Anregungen, ich habe versucht,

Wo finde ich eine Liste von CSS3-Medienabfragen für alle gängigen Geräte?

Anzahl der Antworten 5 Antworten
Ich bin auf der Suche nach einer Liste von media queries, dass die Gegner alle gängigen gerätegrößen in Ihren unterschiedlichen Ausrichtungen (hochformat oder Querformat). Auch, um richtig zu identifizieren, die Medien, die Breite (und Höhe), muss ich

css3-mediaqueries.js VS Antwort.js

Anzahl der Antworten 2 Antworten
respond.js oder css3-mediaqueries.js ? Den amtlichen Unterlagen, vor allem von css3-mediaqueries.js, ist spärlich. Lesung am SO, Foren und blogs ich fasste diese vor-und Nachteile. respond.js Vorteile: Zuverlässiger (? empfohlen von Modernizr , Twitter Bootstrap 3 und H5BP

@Media min-width & amp; maximale Breite

Anzahl der Antworten 2 Antworten
Habe ich diese @media setup: 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) { /* STYLES HERE

Medienabfrage funktioniert nicht in IE9

Anzahl der Antworten 5 Antworten
Ich habe ein seltsames problem, das tritt nur im IE9. Ich arbeite an einer web-Seite, die ein desktop-layout und ein mobiles layout. Gleiche HTML, anderes CSS. Das problem mit den folgenden code: @media only screen and (min-device-width:

Geben Sie CSS-Medienabfragen in den Chrome-Entwicklertools ein

Anzahl der Antworten 4 Antworten
Drücken der Taste F12 kann ich sofort ändern, CSS-Elemente in Chrom. Allerdings kann ich nicht input @media screen and (max-width), ähnlich wie hier: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp Wenn ich drücken Sie die EINGABETASTE, es verschwindet einfach. Was kann ich tun,

Verwenden von Sass-Variablen mit CSS3-Medienabfragen

Anzahl der Antworten 4 Antworten
Ich versuche zu kombinieren, die Nutzung des Sass-variable mit @media-queries wie folgt: $base_width:1160px; @media screen and (max-width: 1170px) {$base_width: 960px;} @media screen and (min-width: 1171px) {$base_width: 1160px;} $base_width ist dann definiert, die an verschiedenen stellen im stylesheet

Single vs Multiple Stylesheets in Responsive Webdesign

Anzahl der Antworten 1 Antworten
Kurz: Sollten Sie eine oder mehrere stylesheets, wenn dabei auf responsive web design? Im detail: In responsive designSie neigen dazu, haben ein Haupt-Stück der CSS, dann die anderen bits und Stücke zu passen Sie das layout, wenn

Media Queries für verschiedene Zoomstufen des Browsers

Anzahl der Antworten 1 Antworten
Ich bin ein Neuling auf responsive design mit CSS3 media queries. Klar verstehe ich, wie wir das Ziel, verschiedene Geräte mit diesen media queries aber der Ort, an dem ich verwirrt bin ist BROWSER ZOOMEN!!. Für ZB:

Bootstrap - Entfernen von Polsterung oder Rand, wenn die Bildschirmgröße kleiner ist

Anzahl der Antworten 8 Antworten
BEARBEITET: Vielleicht sollte ich Fragen, welcher Selektor legt die seitenpolsterung, wenn der Bildschirm ist reduziert auf unter 480px Breite? Ich habe schon surfen bootstrap-Reaktionsfähigkeit.css für eine Weile zu finden, aber nichts scheint, um das zu betreffen. Original

iOS / iPhone: Der Begrüßungsbildschirm der Web App wird nicht angezeigt

Anzahl der Antworten 2 Antworten
Ich habe den folgenden code in die <head> meiner web-app, aber ich bin eben immer ein weißer Bildschirm auf meinem iPhone 3GS während der DOM lädt statt der splash-screen. <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="apple-mobile-web-app-capable" content="yes" />

Minimale Breite mit Viewport-Meta-Tag erreichen

Anzahl der Antworten 5 Antworten
Ich würde gerne meine Webseite viewport-Breite gleich device-width solange device-width > 450px, oder 450px sonst (mein layout dynamisch skaliert, sieht aber nicht gut unten 450px breit). Den folgenden beiden meta-tags funktionieren gut auf tablets, wo die device-width

Verschachteln von Medienanfragen

Anzahl der Antworten 1 Antworten
Standardmäßig möchte ich meinen "body" - element eine grüne Grenze. Auf einem Gerät mit retina display ich möchte, um zu überprüfen, für die Größe ersten. Auf einem ipad will ich meinem Körper einen roten Rahmen und auf

Bootstrap 3 - Oberer Rand der Spalte auf kleineren Bildschirmen

Anzahl der Antworten 3 Antworten
Habe ich eine Zeile mit X Spalten. <div class="container"> <div class="row"> <div class="col-lg-3 col-sm-4 col-xs-6">content</div> <div class="col-lg-3 col-sm-4 col-xs-6">content</div> <div class="col-lg-3 col-sm-4 col-xs-6">content</div> <div class="col-lg-3 col-sm-4 col-xs-6">content</div> <div class="col-lg-3 col-sm-4 col-xs-6">content</div> <div class="col-lg-3 col-sm-4 col-xs-6">content</div> <!-- ...

Responsive Design - Media Query funktioniert nicht auf dem iPhone?

Anzahl der Antworten 3 Antworten
Ich versuche, erstellen Sie eine mobile version meiner website, meine website responsive zu einem kleineren Bildschirm Größe und dem Maßstab entsprechend. Ich habe einige media-Abfragen, die sich korrekt Verhalten in einem browser beim ändern der Größe auf

Wie zielen iPhone 3GS und iPhone 4 in einer Medienabfrage?

Anzahl der Antworten 4 Antworten
Ich versuche zu implementieren, Alternative layouts für das iPad/iPhone und ältere iPhones als auch. Habe ich festgestellt, dass es die beste Methode ist die Verwendung @media aus der CSS3-Spezifikation. Als solche das sind meine Medien-Anfragen in der

iPhone X / 8/8 Plus CSS-Medienabfragen

Anzahl der Antworten 2 Antworten
Was sind die CSS media queries entsprechend zu apples neuen Geräten ? Ich brauche, um die body's background-color ändern Sie den X-safe-Bereich Hintergrundfarbe. InformationsquelleAutor der Frage nathan | 2017-09-20

Gemeinsame Haltepunkte für Medienabfragen auf einer Responsive-Site

Anzahl der Antworten 4 Antworten
Also ich arbeite auf meine erste responsive website macht umfangreichen Gebrauch von media queries. Ich Frage mich, ob es gibt einige gemeinsame Seite-breiten sollte ich optimieren. Werde ich wohl haben eine maximale Breite (nicht voller Flüssigkeit) ich

CSS-Medien fragt Min-width und min-device-width ab?

Anzahl der Antworten 1 Antworten
Ich bin sehr neu in der Welt des Medien-Anfragen, und es ist klar, es ist etwas grundlegendes fehlt mir über den Unterschied zwischen width und device-width, außer Ihrer offensichtlichen Ausrichtung Kapazitäten. Möchte ich als Ziel regulären Computern

CSS-Spezifität, Media Queries und minimale Breite

Anzahl der Antworten 1 Antworten
Ich bin mit dem Umbau meines blog mit responsive web-design im Geist, und der "mobile-first" - Methode - kurz gesagt, ich versuche, min-width, um zu vermeiden jede Art von Replikation oder css.. Nein display:none usw.. Mein problem

Ist es möglich, CSS @media Regeln inline zu setzen?

Anzahl der Antworten 9 Antworten
Brauche ich, um das dynamische laden von banner-Bilder in eine HTML5-app und würde gerne ein paar verschiedene Versionen entsprechend der Bildschirm-Breite. Ich kann es nicht richtig bestimmen, das Telefon ' s-Bildschirm Breite, so dass der einzige Weg,

Respond.JS funktioniert nicht im IE 8

Anzahl der Antworten 21 Antworten
Aus irgendeinem Grund scheint es, dass reagieren JS nicht funktioniert. Ich bin mit der Verwendung von Media-Queries in IE 8 ändern, hintergrund Bilder für verschiedene Größe Bildschirme. Im IE 8 gibt es keinen hintergrund, nur eine Feste

Gibt es eine Möglichkeit, DPI in CSS-Medienabfragen anstelle von px zu verwenden

Anzahl der Antworten 3 Antworten
Anzahl der Pixel in Breite und Höhe nicht immer sagen, die ganze Geschichte. Das funktioniert großartig für das hinzufügen oder entfernen von Elementen aus dem Bildschirm, aber nicht ganz richtig ist, für die richtigen Bild. Mit dem

Wie sollten CSS3 Media Queries verwaltet werden?

Anzahl der Antworten 3 Antworten
Da gibt es viele Möglichkeiten zum implementieren von CSS3 Media Queries in eine website, würde ich gerne wissen, was man empfohlen durch erfahrene web-Designer. Ich denke, der kann ein paar: 1. Alles in einem Stylesheet Es ist

Medienabfragen schlagen innerhalb IE9 iframe fehl

Anzahl der Antworten 5 Antworten
Habe ich folgende media queries in meinem CSS: @media screen and (min-width: 0px) and (max-width: 319px) { body {background-color:red;} } @media screen and (min-width: 320px) and (max-width: 480px) { body {background-color:orange;} } @media screen and (min-width: 481px)

Schachteln @media Regeln in CSS

Anzahl der Antworten 1 Antworten
Support scheint das anders zu sein in allen Browsern.. Überprüfen Sie die link Firefox: Schwarz mit weißem text. Opera, Chrome, IE9: Blau mit schwarzem text. Was ist richtig und wie würde ich es machen konsistent? Den code

@ Media Media Query und ASP.NET MVC Rasierersyntax kollidieren

Anzahl der Antworten 2 Antworten
Ich habe eine große Website, die läuft in ASP.NET MVC mit der Razor view engine. Habe ich ein Basis-stylesheet enthält alle generischen styling für die gesamte Website. Gelegentlich jedoch, ich haben Seite bestimmte Stile, die in der

Wie erkennt man, ob Media Queries mit Modernizr vorhanden sind?

Anzahl der Antworten 2 Antworten
Ich versuche zu erkennen, ob media queries vorhanden sind, mit Modernizr 2, dann im laden respond.js wenn angemessen. Ich habe diese in meinem script.js Datei... Modernizr.load({ test: Modernizr.mq, yep : '', nope: 'mylibs/respond.js' }); Was mache ich