Responsive Webdesign-Media Queries-css

Hier werde ich design responsive website, aber ich habe kleine Zweifel über die Mobile & Desktop-Auflösungen mit media queries.

Mein Kunde seine PC-Auflösung ist 1920*1080

Meiner Entwicklungs-Maschine-Auflösung ist 1366*768

Hier verwende ich mein media query

   /* Media queries */
@media screen and (max-width: 1920px) {
body{
width:1000px;
margin:0 auto;
}
 //some coding here
}

Aber die Sache ist mit dieser media query funktioniert es nicht mit meinem Client die Auflösung.

Die Zweite Sache ist, die ich brauche, um es in mmobile.
Wie man die Auflösung des Handys?

Wie die max-width media query für mobile Geräte(Nicht tablet).

Seine volle Fenster-Auflösung ist 1920 x 1080, sondern sein browser-Fenster, das groß ist? Das ist, was die media-query sieht.
Nicht, Sie zu entmutigen, aber es gibt auch viele bestehende frameworks wie bootstrap und zurb foundation - nur mit einer von Ihnen sparen Sie eine Menge Zeit.
Auf lexus.ca, definierten wir 768px und unter mobile 1024px und unter als tablet und alles über 1024px sind desktop. Dies beeinflusst nur, wie die Seite angezeigt wird selbst. Sie können anzeigen, mobile anzeigen einen browser ein, wenn Sie die Größe der Fenster, Größe. Hoffe, das hilft, die Auflösung des PC ist nicht das, was die Medien-Abfrage sieht. Die media query sieht bei browser-Breite an, die variieren können. nicht, dass viele Menschen die volle Breite browser-Fenster auf einem Bildschirm, 1920
wir nicht-Ziel-Geräte, weil, begrenzen Sie in der Zukunft. Wir nur das Ziel die Breite. So ist es möglich zu sehen, die verschiedenen Ansichten auf jedem browser, solange die Breite passt. 768 ist, wo wir verwandeln den Ort in eine mobile Ansicht, aber es kann gesehen werden auf dem desktop
Vereinbart Huangism Erklärung.das richtige.

InformationsquelleAutor TechGuy | 2014-02-03

  1. 2

    Ist es schwierig, eine genaue übereinstimmung für Ihre Kunden-resolution wegen ein paar Fragen.

    DFDatabaseAdmin ist richtig, dass, nur weil Sie auf 1920x1080, bedeutet nicht, dass die Auflösung verfügbar sein. Die Bildlaufleiste, die Grenzen des Fensters und alle addons, die nehmen Platz auf den browser sichtbaren Bereich der website (der "viewport" oder "Bildschirm"), dann werden Sie tatsächlich haben weniger als 1920 x 1080.

    Eine bessere Lösung für responsive ist immer account für 15-20px Platz für jede media query, so dass die scrollbar und Fensterrahmen nicht verhindern, dass die Magie Breite nicht erreicht. Also, wenn ich will, um den Gegner 1024px Breite und niedriger, ich würde angeben, 1010px wie teh max-width.

    Als für Ihren client-PC, können Sie eine media-query auf seine min-width, anstatt max. Also statt:

      @media screen and (max-width: 1920px){
      #code here
  }

    Können Sie diese:

      @media screen and (min-width: 1900px){
      #code here
  }

    Wenn ich Baue responsive Webseiten, die ich normalerweise benutze foundation von Zurb als meine responsive framework, um zu sparen eine Menge Zeit, aber wenn Sie wollen ein full-custom-Erfahrung, dann coding reaktionsschnell mit der hand ist der Weg, das zu tun. Für meine responsive websites, die ich verwenden 1010px (desktop), 780px (tablet), 600px (mobile). Jedoch, seien Sie nicht überrascht, wenn Sie zum erstellen Ihrer eigenen Seite Abfragen, verändern bestimmte Bereiche früher oder später doch. Hoffe, das hilft.

    scrollbar-Breite ist in der Regel zwischen 15-20 chars also das würde auch nicht: "Also, wenn ich will, um den Gegner 1024px Breite und niedriger, ich würde angeben, 1010px als die max-Breite."

    InformationsquelleAutor jmoody1988

  2. 0

    Wenn Sie entwerfen, die die volle Breite der website-ähnlich der wikipedia, dann Sie haben, setzen media queries entsprechend für die gemeinsame Entschließung, die umfasst mobile, tablet, PC. Sagen Sie zum Beispiel, 

        /* For mobile devices and Tablet */
    @media screen (min-width: 320px) and (max-width: 768px) {
      #code here
    } 

    /* For PC with minimum resolution till your PC resolution */ 
    @media screen (min-width: 769px) and (max-width: 1400px) {
      #code here
    }
    /* For Screen Higher than 1400px */ 
    @media screen (min-width: 1401px) {
      #code here
    }

    Verwenden Sie den obigen code entsprechend Ihrem Entwurf.

    Oder wenn Sie wollen nicht sorgen zu machen über die Auflösung, stellen Sie einen festen container-Breite für die Auflösung oberhalb von 768px. Also, was immer Ihr client-PC-Auflösung wird es fixiert werden entsprechend Ihrer Größe.

    InformationsquelleAutor Karthikeyan

Schreibe einen Kommentar