Responsive Media Queries - Wo setze ich welchen code?

Wird dies mein erstes fully responsive Website, damit habe ich mich umgeschaut und fand die basic-media-Abfragen am unteren Rand der post, das scheint zu passen die meisten Geräte, die in irgendeiner Weise oder form.

Begann ich den code außerhalb von diesen Abfragen (z.B. Ausrichtung der Durchschnittliche desktop). Dann habe ich auf der ersten media query für mobile, aber die zweite Regel nicht die für mich Sinn machen (d.h. alles größer als 321px).

Es zu bedeuten scheint alles größer als 321 bis zu 768 das ist die nächste Regel. Ich glaube, ich bin Missverständnis, wie diese arbeiten soll? Kann mir jemand vielleicht erklären, dies einfach genug Weg? Ich fange an zu denken, dass alle meine CSS-code sollte innerhalb dieser media queries und das soll ich habe noch nicht angefangen mit der Handy-version zuerst, dann erweitern Sie es allmählich, wie die Auflösung größer wird?

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px)
{

}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) and (orientation: landscape)
{

}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)
{

}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)
{

}

/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) and (orientation: landscape)
{

}

/* Large screens ----------- */
@media only screen and (min-width : 1824px)
{

}
Sie scheinen zu verstehen, wird die zweite Regel bedeutet, dass alle Geräte mit einer Querformat-Ausrichtung Folgen, was drin ist, die Medien-Abfrage, dann etwas weiter unten außerhalb der Abfrage überschreiben, so dass die nächste media-query verwendet werden. Wenn Sie keinen code außerhalb der media queries, es wird kein Stil angewendet zwischen 1024px und 1224px, wie Sie max in Ihre Dritte Regel.
Dank gaynorvader, ich bin korrekt zu sagen, dass auch mit der Ausrichtung der Regel muss es noch halten, indem die Bildschirm Größe Regeln. I. e. Landschaft + - Bildschirm-Größe von nicht mehr als 321px?
Thaat ist richtig.

InformationsquelleAutor Jacques | 2013-03-21

  1. 6

    Zweck der media queries ändern der Elemente, damit Sie gut Aussehen, ein bestimmtes Fenster/Bildschirm Größe.

    Mobile-First-design beginnt populär zu werden. Im wesentlichen erstellt der Entwickler die website optimiert sein(sieht aus und wirkt am besten), die auf mobilen Geräten. Dann wird er allmählich fügt Medien-Anfragen an das Ende seiner css überschreiben der original-css. Er tut dies so, dass die Seite passt sich an die Benutzer-Fenster/- Bildschirm Größe, wodurch eine bessere Erfahrung.

    Hier ist ein Beispiel:

    .ImageGalleryItems {
  float: none;
  clear: both;
  background-color: black;
}
@media only screen and (min-width: 768px) {
  float: left;
  background-color: white;
}

    Nun, wenn dem Bildschirm des Benutzers größer ist als 768px, die image-items float left statt display nebeneinander. Auch, die Hintergrundfarbe zu ändern.

    Dies ist das Prinzip, die Sie verwenden können. Wenn Sie bei der Entwicklung für mobile-first, fügen Sie nicht :hover Effekte in Ihrer ursprünglichen css, weil diejenigen, die nicht erwerbstätig sind, die für mobile Geräte. Verwenden Sie dann media queries hinzufügen, in denen Effekte für den desktop. Dieser speichert die Daten-Nutzung und schafft sauberer code.

    Danke Derek, guter Punkt, um den hover-Zustand. Bekomme ich die grundlegenden Regeln, aber ich denke, was verwirrend ist, wie zu wissen, was die screen-Größen gerecht zu werden. 321px scheint ein allgemeiner portrait-Größe für iPhone4, aber Sie fügen Sie eine weitere Regel für Samsung s3 und andere für Samsung Note 2? Oder, sind wir auf der Suche auf einen Bereich und dann unter Berufung auf fluid grids zu tun mit dem rest? I. e. 321px könnte ein Satz von Regeln, dann die Gruppe das s3 und das Note2 zusammen?

    InformationsquelleAutor derek_duncan

  2. 2

    Ich denke, Sie übertreiben es ein bisschen. Reduzieren Sie die Anzahl der Media queries und fügen Sie einige Haltepunkte, wo Sie Ihre design - "Pausen" in gewisser Weise.

    Bedenkt, was in den Abfragen: eine Möglichkeit ist das schreiben eine form der Allgemeinen CSS, und dann überschreiben einige Eigenschaften in media queries. Eine andere Möglichkeit ist, einfach überspringen Sie die "Wechsel" - Eigenschaft in den Allgemeinen CSS-Einstellungen in jedem der fragt.

    So: Sie schreiben Sie nicht ALLE Ihre CSS-innen media queries. Nur die Dinge, die Sie ändern möchten.

    InformationsquelleAutor AntonNiklasson

  3. 1

    Es ist nicht wirklich notwendig, um alles an media queries. Ein Medien-Abfrage, nur ein Gerät und oder die Bildschirm-Größe, die sich innerhalb der Abfrage.

    @media 1 nicht unbedingt Wirkung @media 2.

    Hinweis: Sie können auch Ihre Medien-Anfragen in eine durch Kommas getrennte Liste, um Zeit zu sparen.

    Dies ist, wie ich es getan habe, auf meiner Website:

     /* styles for desktops */
 body{width:100%;}

 img{width:100%;} /* and so on */


@media handheld and (max-width: 960px),

screen and (max-width: 960px),

only screen and (min-device-width : 768px) and (max-device-width : 1024px),

only screen and (min-device-width : 320px) and (max-device-width : 480px),

only screen and (-webkit-min-device-pixel-ratio : 1.5),

only screen and (min-device-pixel-ratio : 1.5)

{
     /*Styles for non desk-tops*/
     /*You Only Need to put styles you want to change in here*/
     img{width:90%;}
}

    Ich hoffe, das hilft.

    Danke, ich wusste nicht, dass über die Verkettung der Regeln, wie, dass.

    InformationsquelleAutor apaul

  4. 1

    Meist nur Zustimmen, was bereits gesagt wurde: Sie entwerfen zwischen Größen und nicht für bestimmte Größen. Die wichtigste Sache zu erinnern ist, zu legen, alles in Prozenten und nicht eine Feste Breite. Das Fazit ist, dass, sollten Sie brauchen wirklich nur drei Abfragen: eine für desktop, eine für tablet und eine für mobile.

    InformationsquelleAutor Dave Kanter

  5. 0

    Das ist schon ein paar media queries, würde ich darüber nachdenken, ob oder nicht Sie wirklich brauchen, alle von denen.

    Können Sie diesen Ansatz von mobile first oder desktop first. Macht keinen Unterschied, wirklich.

    Ich würde empfehlen, einen Blick auf, was media queries, Bootstrap verwenden, als Standardeinstellungen.

    http://twitter.github.com/bootstrap/scaffolding.html#responsive

    InformationsquelleAutor Billy Moat

  6. 0

    Immer Medienabfragen verwenden, sowohl für desktop und mobile, weil, wenn Sie nicht die gesamte css-Rendern wird auf Browsern, nehmen Platz und verlangsamen ur-Webseite (nicht viel, aber riesig, wenn Sie hatte eine große webapp). Also mein Rat wäre, setzen media queries für desktop und für mobile. Also, wenn es lädt, es lädt nur die media queries in Bezug auf die specs und nichts extra oder nutzlos.

    InformationsquelleAutor РАВИ

Schreibe einen Kommentar