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.

LESS CSS Variablen in der Medienabfrage setzen?

Anzahl der Antworten 6 Antworten
Arbeite ich an einer iPad-spezifische website. Um meine website zu arbeiten auf beide die retina-display-iPad und ältere Versionen des iPads, ich möchte eine variable in WENIGER CSS media query wie: @media all and (max-width: 768px) { @ratio:

Wie man reaktionsschnellen Tisch macht

Anzahl der Antworten 8 Antworten
Ich habe eine Tabelle zu repräsentieren einige Daten in meine html-Seite. Ich werde versuchen, diese Tabelle als reagieren. Wie kann ich dies tun ? Hier ist die Demo. InformationsquelleAutor der Frage Bishan | 2013-08-26

Gibt es eine CSS-Medienabfrage, um Windows zu erkennen?

Anzahl der Antworten 4 Antworten
Ich angeben will zwei etwas unterschiedliche hintergrund-Farben, eine für Mac OS, eine für Windows. InformationsquelleAutor der Frage colmtuite | 2011-12-13

Ermitteln, ob ein Browser in einem mobilen Gerät (iOS / Android-Telefon / Tablet) verwendet wird

Anzahl der Antworten 6 Antworten
Gibt es eine Möglichkeit zu erkennen, ob ein handheld-browser (iOS/Android phone/tablet)? Habe ich versucht, diese mit dem Ziel zu machen, ein element halb so breit in einem browser auf einem handheld-Gerät, aber es macht keinen Unterschied. width:

$ (window) .width () ist nicht dasselbe wie Medienabfrage

Anzahl der Antworten 14 Antworten
Ich bin mit Twitter Bootstrap auf ein Projekt. Sowie die Standard-bootstrap-styles habe ich auch Hinzugefügt einige meiner eigenen //My styles @media (max-width: 767px) { //CSS here } Ich bin auch mit jQuery ändern Sie die Reihenfolge von

Media Queries - Zwischen zwei Breiten

Anzahl der Antworten 2 Antworten
Ich versuche, CSS3 media queries, um eine Klasse, die nur angezeigt wird, wenn die Breite größer als 400px und weniger als 900px ist. Ich weiß, das ist wahrscheinlich sehr einfach und ich bin etwas fehlt, klar, aber

Verhindern Sie, dass das Menü in 768px CSS-Medienabfrage einbricht

Anzahl der Antworten 9 Antworten
Ich versuche zu tun, eine Website mit twitter bootstrap. Ich bin mit relativ weniger Menüs, so dass es irgendwie passt der 768px display auch. Aber in der bootstrap standardmäßig das Menü zusammenbricht mithilfe von media queries. Ich

Wie bekomme ich CSS-Mediaqueries mit jQuery $ (window) .innerWidth () arbeiten?

Anzahl der Antworten 5 Antworten
Ich versuche ein jQuery lassen kümmern sich ein Menü, CSS-tut etwas, um das Fenster hintergrund beim ändern der Größe des browser. Also jQuery nicht so etwas wie dieses: if ( $(window).innerWidth() < mediaQueries['small']) { //(where 'small' would

Twitter Bootstrap 3: Wie benutzt man Medienabfragen?

Anzahl der Antworten 14 Antworten
Ich bin mit Bootstrap 3 zu bauen, responsive layout, wo ich einstellen möchte ein paar Schriftgrößen entsprechend der Bildschirmgröße. Wie kann ich mit media queries, um diese Art von Logik? InformationsquelleAutor der Frage Rui | 2013-08-25

Twitter Bootstrap Responsive Layout funktioniert nicht in IE8 oder niedriger

Anzahl der Antworten 6 Antworten
Entwickelte ich eine Website mit twitter bootstrap und es scheint, dass das responsive layout Teil ist kaputt in allen IE Browsern ab IE8 und unten. Ist das einfach nur nicht unterstützt, für diesen Browser? InformationsquelleAutor der Frage

iPhone 5 CSS-Medienabfrage

Anzahl der Antworten 11 Antworten
Des iPhone 5 hat ein mehr-Bildschirm und es ist nicht ansteckend meine website eine mobile Ansicht. Was sind die neuen responsive design von Abfragen für das iPhone 5 und kann ich die kombinieren mit bestehenden iPhone Abfragen?

CSS-Medienabfragen für Galaxy S3

Anzahl der Antworten 9 Antworten
Weiss jemand wie man das Ziel das Samsung Galaxy S3 mit media queries? Momentan nutze ich: iPad <link rel="stylesheet" media="all and (device-width: 768px)" href="css/device-768.css"/> Andere tablet-Geräte <link rel="stylesheet" media="all and (max-device-width: 767px) and (min-device-width: 641px)" href="css/device-max767.css"/> Handys

Wie erkennt man die Geräteausrichtung mithilfe von CSS-Medienabfragen?

Anzahl der Antworten 4 Antworten
In JavaScript die Orientierung-Modus kann erkannt werden mit: if (window.innerHeight > window.innerWidth) { portrait = true; } else { portrait = false; } Jedoch, gibt es eine Möglichkeit zur Erkennung der Ausrichtung mittels CSS nur? ZB. so

Warum funktionieren meine CSS3-Medienanfragen nicht auf mobilen Geräten?

Anzahl der Antworten 9 Antworten
In der styles.css, ich bin mit der Verwendung von media queries, die beide verwenden eine variation von: /*--[ Normal CSS styles ]----------------------------------*/ @media only screen and (max-width: 767px) { /*--[ Mobile styles go here]---------------------------*/ } Den Seiten

Kombinieren von CSS-Medienabfragen

Anzahl der Antworten 2 Antworten
Ich wollen, um den gleichen Satz von CSS-Stilen zu Menschen, drucken Sie die Seite (media=print) und Menschen surfen mit einem mobilen Telefon. Gibt es eine Möglichkeit kann ich kombinieren von CSS-media queries? Etwas wie @media only print

Max-Breite vs. Min-Breite

Anzahl der Antworten 6 Antworten
Meisten tutorials bin ich beim Lesen auf die Verwendung von Media Queries und demonstrieren die Verwendung von min-widthaber ich bin selten zu sehen, Menschen mit max-width. Ist dies eine Art von design-trend oder Muster, warum Menschen mit

Warum ist die Reihenfolge der Medienabfragen in CSS wichtig?

Anzahl der Antworten 1 Antworten
Spät, ich habe die Gestaltung von Websites, die mehr reagiert und ich habe mit CSS media queries Häufig. Ein Muster, das mir aufgefallen ist, dass die Reihenfolge, in der die media queries definiert sind tatsächlich von Bedeutung.

Was ist der Unterschied zwischen "Bildschirm" und "nur Bildschirm" in Medienanfragen?

Anzahl der Antworten 4 Antworten
Was ist der Unterschied zwischen "Bildschirm" und "nur Bildschirm" media queries? <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 sind wir gefordert, für die Verwendung von 'Nur'.

Medienabfrageformate, die keine Originalvorlagen überschreiben

Anzahl der Antworten 4 Antworten
Ich bin versucht, einige Medien-Anfragen für eine Webseite, die ich Baue. Das problem das ich habe ist allerdings, während die media-query-Stile sind tatsächlich angewendet werden, sind Sie überschrieben wird. Ich kann nicht für das Leben von mir

CSS Media Query - Soft-Keyboard bricht CSS-Orientierungsregeln - alternative Lösung?

Anzahl der Antworten 10 Antworten
Arbeite ich mit mehreren tablet-Geräte - beide Android und iOS. Derzeit habe ich folgende resolution Varianten für alle Tabletten. 1280 x 800 1280 x 768 1024 x 768 (iPad Natürlich) - iPad tritt dieses Problem nicht auf

Wie kann ich Internet Explorer (IE) und Microsoft Edge mit JavaScript erkennen?

Anzahl der Antworten 11 Antworten
Habe ich eine Menge herum, und ich verstehe, dass es gibt eine Menge von Möglichkeiten, um zu erkennen, internet explorer. Mein problem ist Folgendes: ich habe einen Bereich auf meiner HTML -, doc -, dass, wenn geklickt

Wie werden CSS-Medienabfragen für alle mobilen Geräte und Tablets codiert?

Anzahl der Antworten 2 Antworten
@media only screen and (max-device-width : 640px) { /* Styles */ } @media only screen and (max-device-width: 768px) { /* Styles */ } Dies ist, was ich habe, so weit. Die PSD mockup für die mobile Website

Nexus 7 screen.width gibt 800 zurück, aber media query max-width: 720px gilt weiterhin

Anzahl der Antworten 1 Antworten
Ich habe ein Google Nexus 7 tablet verwende ich zum testen einige responsive designs. In Javascript, die screen.width kehrt als 800px, wie erwartet (die native Auflösung). Kommen, wie die folgende media query nahm von dem Tablett, wenn

CSS-Medienabfragen: max-width OR max-height

Anzahl der Antworten 2 Antworten
Beim schreiben eines CSS-media-Abfragen, ist es eine Möglichkeit können Sie mehrere Bedingungen mit "ODER" - Logik? Ich versuche, so etwas zu tun: /* This doesn't work */ @media screen and (max-width: 995px OR max-height: 700px) { ...

Fancy Media-Abfragen mit etwas weniger Magie

Anzahl der Antworten 6 Antworten
Wäre es schön zu wickeln css-styles für verschiedene Auflösungen innerhalb einiger css-Klassen mit weniger. Ich würde gerne etwas machen wie: footer { width: 100%; } .tablet { footer { width: 768px; } } .desktop { footer {

Wie lauten die Regeln für die Überlappung von CSS-Medienabfragen?

Anzahl der Antworten 2 Antworten
Wie wir Raum aus media queries genau, um überschneidungen zu vermeiden? Zum Beispiel, wenn wir Bedenken, code: @media (max-width: 20em) { /* for narrow viewport */ } @media (min-width: 20em) and (max-width: 45em) { /* slightly wider

Retina zeigt hochauflösende Hintergrundbilder an

Anzahl der Antworten 3 Antworten
Mag dies wie eine dumme Frage. Wenn ich verwenden Sie dieses CSS-snippet für den regulären anzeigen (Wo box-bg.png ist von 200px 200px); .box{ background:url('images/box-bg.png') no-repeat top left; width:200px; height:200px } und wenn ich eine media query wie

Kann ich @media in einer if / else Art benutzen?

Anzahl der Antworten 3 Antworten
Habe ich diese form platziert in die Fußzeile meiner Seite (hat nur ein Textfeld und eine Schaltfläche). Ich will versuchen, und wenden Sie @media sind, basierend auf der viewport-Breite zur Verfügung steht ... So zum Beispiel, in

Wie kann die Anzahl der Elemente pro Zeile mithilfe von Medienabfragen in Flexbox gesteuert werden?

Anzahl der Antworten 1 Antworten
So vorstellen, ich habe Folgendes Markup <div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> Und die folgenden Stile (SASS) @mixin max-width($width) { @media screen and (max-width:

Medien = Alle gegen Medien = Bildschirm

Anzahl der Antworten 2 Antworten
Wie es scheint, vor kurzem habe ich viele gesehen, die mehr Menschen beginnen, zu benutzen media="all" vs media="screen" in Ihre stylesheets. Meine Frage ist Wann sollte ich media="all" über media="screen" - und Umgekehrt? Hinweis: ich bin mit

@media query funktioniert nicht im Handy. Funktioniert gut in Chrome

Anzahl der Antworten 3 Antworten
Ich bin versucht, dies funktioniert aber irgendwie nicht arbeitet in mobile. wenn ich chrome tool überschreibt die screen-Größe, funktioniert es. ich bin nicht sicher, was ich falsch mache. bitte helfen Sie @media screen and (min-device-width : 320px)

Wie kann ich eine CSS-Medienabfrage vor dem Drucken verbergen? "Nicht" logischer Operator funktioniert nicht

Anzahl der Antworten 5 Antworten
Ich versuche zu verstecken, eine media-query nicht mehr gedruckt werden, und so kam ich auf @media not print and (min-width:732px). Aber aus welchem Grund auch immer, diese (und viele Varianten, die ich versucht habe) wird nicht angezeigt,

CSS3 Media Query - Breite des Containers statt Bildschirm?

Anzahl der Antworten 3 Antworten
Habe ich noch nicht gesehen, diese Frage hier, aber ich Frage mich, ob jemand weiß, ob es möglich ist, über eine media query basiert auf einem container-oder übergeordneten element, basierend auf er-Breite. Der Anwendungsfall für diese ist,

Inkonsistente Schriftgrößen auf dem Smartphone

Anzahl der Antworten 3 Antworten
Ich bin tweaking eine web-Seite, so dass es sieht gut aus auf Smartphones. Ich habe erklärt, eine @media-Bereich in der CSS-Datei, so kann ich geben Sie die Größe der schriftart für diese Seite. Hier ist das media-Bereich:

Können Medienanfragen auf der Basis eines div-Elements anstelle des Bildschirms skaliert werden?

Anzahl der Antworten 8 Antworten
Möchte ich Medienabfragen verwenden, um die Größe von Elementen auf der Grundlage der Größe einer div element Sie sich befinden. Ich kann nicht verwenden Sie den Bildschirm Größe wie die div wird nur benutzt, wie ein widget

Breiten für Medienabfragen

Anzahl der Antworten 5 Antworten
Was sind die wichtigsten Medien-Abfrage breiten für alle Endgeräte wie desktops, tablets, laptops/Ipads, Iphones und Smartphones? Gibt es irgendwelche standard-breiten für diese Geräte? InformationsquelleAutor der Frage Nishantha | 2013-05-23

Medienabfragen funktionieren nicht in einem Iframe

Anzahl der Antworten 2 Antworten
Habe ich in eine Webseite, die responsive ist. Es macht den Einsatz von media queries. Aber die gleiche Seite in einem iframe geladen, funktioniert nicht. Betrachten Sie zum Beispiel auf meiner Webseite, die ich gegeben habe, Hintergrundfarbe

IE8-Unterstützung für CSS Media Query

Anzahl der Antworten 11 Antworten
Funktioniert IE8 nicht unterstützt die folgende CSS-media-query: @import url("desktop.css") screen and (min-width: 768px); Wenn nicht, was ist die Alternative Art des Schreibens? Das gleiche funktioniert auch Prima in Firefox. Irgendwelche Probleme mit dem code unten? @import url("desktop.css")

CSS-Medienabfrage nur für iPad und iPad?

Anzahl der Antworten 5 Antworten
Hallo, ich arbeite mit mehreren tablet-Geräte, iPad, Galaxy Tab, Acer Iconia, LG 3D-Pad und so weiter. iPad - 1024 x 768 LG-Pad - 1280 x 768 Galaxy Tab - 1280 x 800 Ich soll das iPad nur

Ist es möglich, Medienabfragen in Medienabfragen zu verschachteln?

Anzahl der Antworten 3 Antworten
Ist das möglich? Wie es scheint, eine saubere Lösung für mich, aber ich bin mir nicht sicher, ob es funktionieren wird. @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Code for both

Holen Sie sich die Gerätebreite in Javascript

Anzahl der Antworten 8 Antworten
Ist es ein Weg, um die Benutzer-Gerät-Breite, im Gegensatz zu viewport-Breite, mit javascript? CSS media queries bieten diese, wie ich sagen kann, @media screen and (max-width:640px) { /* ... */ } und @media screen and (max-device-width:960px) {

Überschreiben Sie CSS-Medienabfragen

Anzahl der Antworten 2 Antworten
Arbeite ich mit einer Seite, jeden Tag, die verwendet CSS media queries, die ich nicht mag; ich würde lieber die ganze Seite (die meisten von Ihnen sind im Zusammenhang mit der Twitter Bootstrap-Menü kollabieren, wenn Sie schmaler

CSS @media druckt Probleme mit Hintergrundfarbe;

Anzahl der Antworten 17 Antworten
Ich bin neu hier in diesem Unternehmen und wir haben ein Produkt, das verwendet Meilen von css. Ich bin versucht, um eine druckbare stylesheet für unsere app aber ich habe Probleme mit der hintergrund-Farbe in den @media

Ist es möglich, die Orientierung in einem Browser zu emulieren?

Anzahl der Antworten 13 Antworten
Wie der Titel ist es möglich zu emulieren Orientierung in google chrome oder firefox? Bedeutung irgendwie ändern Sie die browser unterstützen media queries (Orientierung = (Landschaft oder portrait)) Ich habe einen emulator für mobile, aber ich möchte,

Media Queries: Wie zielen Desktop, Tablet und Handy?

Anzahl der Antworten 12 Antworten
Ich habe getan, einige der Forschung auf Medien-Anfragen und ich bin immer noch nicht ganz verstanden, wie das Ziel-Geräte von bestimmten Größen. Ich möchte in der Lage sein, um den Gegner desktop, tablet und mobile. Ich weiß,

Twitter Bootstrap - Wie erkennt man, wenn Medienabfragen gestartet werden

Anzahl der Antworten 12 Antworten
welche ist die Schnellste und einfache Weg, um das Feuer, als bootstrap-responsive.css media queries gehen Sie in Aktion? gehen in action = wenn Sie die Größe Fenster, um mobile Breite und Website geändert wird, um ansprechende mobile

Bootstrap 3.0 Medienabfragen

Anzahl der Antworten 2 Antworten
Ich arbeite an einem kleinen Projekt basiert auf Boostrap 3 (html5boilerplate custom build) und zu versuchen, die "offiziellen" media queries in der boostrap-Dokumentation: /* Extra small devices (phones, up to 480px) */ /* No media query since

Wechsel zu Em-basierten Medienabfragen

Anzahl der Antworten 3 Antworten
Nun, dass die WebKit - Seite-zoom-bug wurde behobenwas sind die wichtigsten Gründe für den Einsatz von em basierte media queries eher als pixel-basierte media queries? Bounty Ich bin auch hinzufügen, ein Kopfgeld auf meine Frage, weil so

CSS-Medienabfragen nach Bildschirmgrößen

Anzahl der Antworten 3 Antworten
Ich versuche zurzeit, zu entwerfen ein layout, das kompatibel ist für mehrere Bildschirmgrößen. Die Bildschirm Größen, die ich entwerfe, sind unten aufgelistet: Bildschirm Größen: 640x480 800x600 1024x768 1280 x 1024 Pixel (und größer) Die Sache, die ich

Häufige CSS-Medienabfragen Break Points

Anzahl der Antworten 13 Antworten
Arbeite ich an einem Responsive Web-Site mit CSS-Media-Queries. Ist die folgende eine gute Organisation für Geräte? Handy, Ipad (Landscape & Portrait) -, Desktop-und Laptop, Großer Bildschirm Was sind die gängigen media queries break-point-Werte? Ich Plane, verwenden Sie