2010-07-20 17 views
9

Ich habe gerade mehrere Stunden für eine neue Seite geschrieben ... sieht gut aus in meiner Auflösung, 1366x768 ... Aber selbst wenn man auf 1024x768 runter geht, passt nicht alles in die Bildschirmbreite !!Wie kann sichergestellt werden, dass eine Website für alle Bildschirmauflösungen geeignet ist?

Versuchte:

<style type='text/css'> 
    body {width:100%;} 
</style> 

Dies hat eine gewisse Wirkung auf meine Auflösung haben aber keinen Einfluss auf die kleineren Auflösungen ... Wie kann ich meine Webseite stellen Sie sicher, 100% in allen Bildschirmauflösungen passen?

Antwort

7

Ich benutze CSS @ media Direktive, leider nicht von IE8 unterstützt. Konform CSS3 können Sie anders gestalten, entsprechend der Breite des Ansichtsfenster:

<style type="text/css"> 
@media screen and (min-width:1px) and (max-width:1365px) { 
    ... 
} 
@media screen and (min-width:1366px) { 
    ... 
} 
</style> 

By the way, Sie haben einen Fehler in Ihrem CSS, vergessen Sie das Gerät angeben:

body {width:100%;} 
1

Sofern Sie nicht alle Größenmessungen in Prozent durchführen möchten, glaube ich nicht, dass Sie das können. Und selbst dann haben Sie ein Problem, wenn jemand eine Auflösung in einem anderen Seitenverhältnis oder einer wirklich niedrigen Auflösung verwendet, weil Ihre Seite im ersten Fall gestreckt oder gequetscht ist und in der zweiten Sie Layoutprobleme haben könnten.

+1

Genau. Es ist nahezu unmöglich, sicherzustellen, dass eine Website für "_all_ Bildschirmauflösungen" geeignet ist; Sie sollten sich darauf konzentrieren, Ihre Website für die gängigsten Auflösungen (in Ihrer Zielgruppe) optimal zu machen und sie so einfach wie möglich zu verwenden. –

3

Eine Sache, die Sie interessieren könnten, sind CSS Media Queries. Sie werden nicht in jedem Browser unterstützt, IE unterstützt sie beispielsweise nur ab Version 9, kann aber sowohl bei der Größenanpassung von Fenstern als auch bei kleineren Auflösungen helfen, da Sie für jede Bildschirmgröße unterschiedliche CSS-Regeln anwenden können.

Abgesehen davon, stellen Sie sicher, dass Ihr Layout nicht "starr" ist, d. H. Behandeln Sie Divs wie Tabellen nicht. Stellen Sie ihre Breite basierend auf einem Prozentsatz des übergeordneten Elements ein, oder verwenden Sie Floating, um sie korrekt auszurichten. Es ist akzeptabel, eine "minimale Breite" Ihrer Website - in der Regel 800 oder 1024 - zu akzeptieren, dass Benutzer auf alten Auflösungen wie 640x480 nur scrollen müssen.

Sie werden wahrscheinlich mit Ihrem CSS zurück zum Zeichenbrett gehen und es so gestalten müssen, dass es sich selbst neu anpasst und/oder eine minimale Breite hat.

+0

+1 [SimpleBits] (http://simplebits.com/) wurde gerade mit Medienabfragen neu gestaltet. Wenn Sie das Potenzial dieser Methode sehen wollen, gehen Sie dort auf einem 24 "Monitor, starten Sie im Vollbildmodus, und ziehen Sie es auf 100px breit. Es macht mich sabbern! – kingjeffrey

+0

Und hier ist ein großartiger Artikel über [Media Queries] (http : //www.alistapart.com/articles/responsive-web-design/) bei A List Apart. – kingjeffrey

1

Ihr CSS für das Body-Tag sieht OK aus. Aber wenn z.B. Alle DIVs in deinem Körper haben eine feste Größe, sie werden niemals die gesamte Breite ausfüllen. Können Sie ein Beispiel Ihrer Seite posten?

0

Menschen neigen dazu, um Websites 960px breit zu machen.

Es ist leicht, in gleich große Spalten aufzuteilen, da es durch 3, 4, 5, 6, 8, 10, 12, 15 und 16 teilbar ist, und es passt gut in die kleinste (lohnende) Auflösung von 1024px.

Sie können natürlich flüssige Layouts oder verschiedene Methoden zur Erkennung der Bildschirmauflösung verwenden, aber wenn Sie viele Bilder verwenden, macht es ein Pita.

0

Ich würde Ihnen empfehlen, ein CSS-Framework zu verwenden. Sie bilden die Grundlage für Ihr Design, so dass Sie sich nicht um solche Dinge sorgen müssen.

Mein persönlicher Favorit ist Blueprint, da sie sich um Dinge wie Typografie und Formulargestaltung nicht nur um das Rasterlayout kümmern, sondern auch darum, was Sie suchen.

960gs ist ein weiterer beliebter, der in sehr ähnlicher Weise zu Blueprint funktioniert.Sie haben auch ein paar Werkzeuge, die Ihnen bei der Anpassung Ihrer Entwicklung helfen und nicht so einschränkend wie Blueprint.

Sie sind die zwei, die ich vorher benutzt habe, aber ich bin sicher, dass es viele mehr gibt.

0

Erstellen Sie Layout-Stylesheets für die gängigsten Auflösungen ... sagen wir mal 800x600, 1024x767 und 1280x1024. Dann laden Sie sie mit:

<link rel='stylesheet' media='screen and (min-width: 778px)' href='css800width.css' /> 

Sie können mehr bei CSS-Tricks lesen.

Verwandte Themen