Wie Responsive Webdesign und seine Best Practices zu implementieren

Ich habe eine Website, die Pixel verwendet, um die Seiten zu rendern. Aber wenn ich die Website in verschiedenen Geräten mit unterschiedlicher Bildschirmauflösung die ganze Seite wird nicht in Bildschirm passen und wenn ich Prozent verwenden, wird der Inhalt der Seite gequetscht werden.Wie Responsive Webdesign und seine Best Practices zu implementieren

Ist das responsive Webdesign die richtige Wahl für die Gestaltung der Webseite? Wenn das so ist, habe ich wenig Bedenken.

Welches Risiko besteht bei der Umwandlung einer bestehenden Website in Responsive Design?
Gibt es einen Rahmen zur Verfügung, dies zu tun und was die beste
ist, wie es ist, auf verschiedenen Geräten und Browsern unterstützt

Quelle

2013-06-06 n92

(1) Es ist ein Risiko darin nicht zu tun, die heutigen Markt gegeben, aber keine Gefahr, es zu tun. (2) Es gibt viele Rahmenbedingungen. Google "Responsive Design" und Sie werden viele Ressourcen finden. Ich beginne selbst ein solches Projekt und habe genau das gestern getan. (3) Die sehr guten Ressourcen, die Sie aufgrund Ihrer Google-Suche finden, erklären den Support für verschiedene Geräte und Browser. –

Sie wollen auch in Vor- und Nachteile des responsiven Designs zu wählen, um eine Entscheidung zu treffen, ob Sie es verwenden. Ich bevorzuge es immer noch, eine separate mobile Website zu erstellen, da Responsive Design mobile Geräte so viel wie die Desktop-Website herunterladen kann, aber keine Inhalte verwenden, die es herunterladen – Pete

Mit media queries wird ein anderes CSS für verschiedene Bildschirmgrößen angepasst. Die Art, wie es funktioniert, sagt dem Browser: wenn screenwidth = 700px oder kleiner/größer; Verwenden Sie mobile CSS. Wenn Bildschirmbreite = 1000px oder kleiner/größer; Verwenden Sie Desktop-CSS. Es gibt keine Begrenzung für die Anzahl der Medienanfragen, die Sie verwenden können.

Verwenden von Prozentsätzen ist auch eine Möglichkeit; fluid design. Ich würde vorschlagen, dies jedoch zusammen mit Medienabfragen zu verwenden.

Wie für Frameworks gibt es viele da draußen. Bootstrap ist eine der populäreren. Ich persönlich glaube, dass die Arbeit mobile first der beste Weg ist, um zu gehen. Über dieses Thema wird jedoch immer noch heftig diskutiert.

Wie Pete in einem Kommentar erwähnt; Arbeiten mit gradeful degredation (Desktop zuerst) wird das Gerät so viel wie die Desktop-Website herunterladen, aber nicht den Inhalt heruntergeladen verwenden. Wich ist ein großer Nachteil für den Benutzer. (Größere Pageload Zeiten, viele Server-Anfragen, mehr Nutzung von MB-Daten usw.) Daher, warum ich denke, progressive Verbesserung (mobile zuerst) ist der Weg zu gehen.

Mit progressiver Verbesserung lädt der Browser immer zuerst das mobile css herunter; Die Seitenladezeiten werden extrem verkürzt.

Für Browser-Support-Informationen zu Responsive Design, überprüfen Sie this link.

Quelle

2013-06-07 13:13:24 Jefferson

sehr nützliche Informationen für mich in diesem Stadium – n92

Froh, dass ich helfen konnte. – Jefferson

Ich bin nicht einverstanden mit der Benennung Bootstrap ein "Framework". Es ist nicht ! Die Leute werden missleded. CodeIgniter ist ein Framework, Bootstrap (obwohl es auf seiner eigenen Website ein Framework genannt wird) es ist nur eine Reihe von vordefinierten CSS3-Regeln, die Sie direkt mit CSS erstellen können. Ein Framework enthält sehr komplexe Sätze von benutzerdefinierten Funktionen und Variablen und bietet Abkürzungen, die der Programmierer verwenden kann. Ich stimme Bootstrap als das beste für flüssige und responsive Design. –

auf media queries Lesen bis zu CSS ändern sich je nach Browser Breite oder Höhe.

Fügen Sie viewport hinzu, damit Ihre Webseiten auf mobilen Geräten korrekt skaliert werden.

Quelle

2013-06-06 11:41:57

Brett schlug genial vor. Und für alle Standard-Medien Bildschirme überprüfen Sie alle Medienabfragen hier http://www.scaledrop.com/blog/?p=783 –

-2

Blick unter einem typischen ansprechenden Leiter html:

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="HandheldFriendly" content="true"> 
<meta charset="utf-8"> 
<meta name="description" content="How to make android app"> 
<meta name="author" content="Animesh Shrivastav"> 
<title>Make-Website</title> 
<link rel="stylesheet" href="../css/my.css">

und eine typische reaktions css

html { 
    margin: 0; 
    padding: 0; 
} 

body { 
    font-size: 1em; 
    font-family: sans-serif; 
    margin-left: 20%; 
    width: 78%; 
} 

nav { 
    position: fixed; 
    top: 0; 
    left: 0; 
    text-align: center; 
    width: 20%; 
    min-height: 1500px; 
    color: rgba(255,255,255,0.5); 
    background-color: #34495e; 
}

Jetzt selbst verstehen.

Wenn Sie nicht verstehen können, dann unter meiner Website finden Sie unter: writing responsive website in text editor like notepad

Quelle

2017-11-05 10:15:42

Wie Responsive Webdesign und seine Best Practices zu implementieren

Antwort

Verwandte Themen