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.
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
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
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 {
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):
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
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()
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
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
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
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,
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
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
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
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:
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,
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
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
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:
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
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" />
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
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
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> <!-- ...
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
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
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
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
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
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
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,
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
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
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
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)
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
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
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