Machen Sie Website kompatibel mit anderen Geräten

Question

Also meine Website ist gut auf dem Desktop, keine Probleme. Aber wenn ich es per Telefon ansehe, ist die Galerieseite sehr durcheinander. Jetzt konnte ich nicht herausfinden, wie man es kompatibel macht! Hilfe bitte, hier ist die Website: http://www.marbleddesigns.com/

Answer 1

Verwenden mediaquery zur Website-Display gut auf anderen Geräten machen, nennen wir es Responsive Webdesign

@media (max-width: 767px) { 
    // Style for devices have width <= 767px; 
} 
@media (max-width: 1023px) and (min-width: 768px) { 
    // Style for devices have width >= 768px and <= 1023px; 
} 
@media (min-width: 1024px) { 
    // Style for devices have width >= 1024px; 
} 

Sie können Stil für Elemente auf Ihrer Seite hinzufügen.

Ich habe simple responsive grid system hier hinzugefügt, Sie können meine mediaquery css kopieren und Klassen auf Ihrer Website hinzufügen, damit es gut auf anderen Geräten funktioniert.

Answer 2

Es gibt zwei Hauptansatz, um Ihre Website verfügbar und reaktionsschnell auf mehreren Geräten.

I/Wenn Sie Größen von Divs und mehr definieren, verwenden Sie bitte Prozent (%). Dadurch wird sichergestellt, dass sich die Website an die Bildschirmgröße anpasst und sich so an unterschiedliche Auflösungen anpasst. Wenn Sie daran denken, eine Website zu erstellen, schauen Sie immer auf verschiedene Browser und Geräte, um zu sehen, ob sie überall gut aussieht.

II/Die andere Option ist natürlich die Verwendung von Medienabfragen. Sie sind Struktur wie folgt aus:

@media only screen and (max-width: 600px) {color:red;} 

sie im Grunde eine Regel gelten, wenn eine Bedingung wie die Größe des Bildschirms erfüllt ist in der Regel in unserem Beispiel würde der Text rot werden, wenn das Browserfenster kleiner als 600pw breit ist.

Für einige gute Tutorials empfehle ich diese Links:

http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

http://www.w3schools.com/css/css_rwd_mediaqueries.asp