Interaktives CSS für alle Bildschirmtypen

Ich versuche meine Website vollständig interaktiv zu gestalten.Interaktives CSS für alle Bildschirmtypen

Erste Ausgabe: Logo img ist nicht vertikal ausgerichtet, wie ich es will.

Wenn die Bildschirmbreite> 1200 ist, ist der Rand von oben (nav) zu groß. Es scheint wie folgt aus:

Wenn die Bildschirmbreite weniger ist es scheint, wie ich will es:

Ich habe versucht, Polsterung und Marge zu ändern, aber ohne Ergebnis für alle Bildschirmgrößen. Ich denke, dass dies eine gute Idee sein könnte:

aber ich denke nicht, dass es eine gute Praxis ist.

Zweite Ausgabe: Ich habe 4 Boxen. Ich habe sie interaktiv gemacht. Ich habe sogar die Bildgröße interaktiv dank stackoverflow-Benutzern gemacht. Also, wenn die Bildschirmbreite mehr als 736px ist es sieht wie folgt aus:

aber wenn es weniger ist, ist das Bild wirklich groß:

Als Referenz ist hier die Link: enter link description here Fühlen Sie sich frei, irgendein CSS zu fragen. Prost

Quelle

2016-04-08 Apolo Radomer

Sie können mehr Sachen außer Breite in Ihren Media-Abfragen ... –

wie kann ich ihre Größe (einschließlich der Bild und der Text) interaktiv --- indem Sie eine 'font-Größe' Element in Ihre Medienabfragen für Jede Größe –

Zuerst Ihre CSS Blatt bearbeiten, um die reaktions Bild CSS hinzufügen I about.Then this text document speichern geschrieben, die ich für 2 bis 4 reaktions Gitter gemacht

die html in den verschiedenen Orten verwenden und kopieren Sie alle die CSS auf Ihre Stylesheet.

Quelle

2016-04-10 21:56:03 mlegg

Als nächstes würde ich auf https://realfavicongenerator.net/ gehen und alle verschiedenen Favicons erstellen, die auf jedem Gerät funktionieren. Laden Sie ein 260 x 250 Pixel großes Bild hoch. Es erstellt dann alle verschiedenen Größen und gibt Ihnen den HTML-Code zu verwenden. – mlegg

Ich habe Ihren Text für zukünftige Referenz gespeichert. Meine Boxen sehen jetzt gut aus, obwohl ich dort Ihren Code nicht benutzt habe. Ich habe gerade eine maximale Breite für das Bild hinzugefügt, wenn die Bildschirmbreite weniger als 736 Pixel beträgt. Auch ich habe es geschafft, die Lücke Problem zu lösen. Was das kleine Lücke Problem betrifft, habe ich ein Padding-Top hinzugefügt: 10% zu "hi-icon" und "workcontainer" divs. Warum hast du die Favicon-Sache erwähnt? Ich habe bereits ein Favicon und es sieht gut aus. –

Der Favicon-Generator erstellt etwa 24 Symbole und einige Codedateien. Sie laden sie alle in das Stammverzeichnis hoch. Zum Beispiel haben Sie ein Favicon. Dies bedeutet, dass es auf einigen Geräten nicht angezeigt wird und auf anderen Geräten nicht korrekt angezeigt wird. Sehen Sie sich den Favicon Checker [link] https://realfavicongenerator.net/favicon_checker?site=http%3A%2F%2Fapolosiskos.co.uk%2Fapolo.html#.VwuruUfPSSo für Details zu Ihrer Site an. Bearbeiten Sie Ihr Favicon zu 256px X 256px und laden Sie es dann zum Generator, es spuckt alle neuen Dateien in ein paar Minuten aus, – mlegg

Sie haben einige html errors

Sie viele CSS-Fehler haben css validator errors

Ich würde aufzuräumen Ihren Code mit den Links und dann die Seite erneut speichern und anzuzeigen. Es sieht so aus, als ob Sie das Grid-System in Ihrem CSS installiert haben.

Quelle

2016-04-08 20:01:39 mlegg

Das CSS, das Sie sehen, ist für die gesamte Webseite. Ich habe den Link des Div hinzugefügt, den ich besser machen möchte. Ich werde heute mein Bestes geben. Es ist mein Hobby, also habe ich nicht viel Zeit. Aber ich möchte es zum Laufen bringen. Für jedes Gerät :) –

Ich liebe diesen Responsive Grid Generator. Versuchen Sie es http://www.responsivegridsystem.com/calculator/ – mlegg

Erstaunliches Werkzeug! Vielen Dank. Ich werde das benutzen. Ich werde versuchen, das CSS und HTML zu säubern, wenn ich kann, und ich werde zurückkommen, um die Frage zu aktualisieren, da es viele Probleme gibt. Ich denke mein Problem ist, dass ich das img in der Box ansprechen muss. Und dann sollte es funktionieren. –

Interaktives CSS für alle Bildschirmtypen

Antwort

Verwandte Themen