CSS για όλες τις αναλύσεις (screen resolutions)

Τι κάνετε όταν χρειάζεται ένα περίπλοκο layout να εμφανίζεται ικανοποητικά σε όλες τις αναλύσεις (screen resolutions) και συσκευές? Μα να χρησιμοποιήσετε πολλαπλά CSS αρχεία!

Πιο συγκεκριμένα βάλτε στο head της σελίδας σας τον παρακάτω κώδικα:

<!-- CSS -->
<link type="text/css" rel="stylesheet" media="all" href="css/style.css" title="default" />
<link rel="alternate stylesheet" type="text/css" href="css/thin.css" title="thin"/>
<link rel="alternate stylesheet" type="text/css" href="css/wide.css" title="wide"/>
<link rel="alternate stylesheet" type="text/css" href="css/wider.css" title="wider"/>

<!-- dynamiclayout -->
<script src="scripts/dynamiclayout.js" type="text/javascript"></script>

Το αρχείο "style.css" είναι το βασικό σας CSS file και τα υπόλοιπα "thin.css", "wide.css" και "wider.css" τα υπόλοιπα CSS για τις διαφορετικές αναλύσεις οθονών. Το αρχείο "dynamiclayout.js" έχει βασικές ρυθμίσεις για το ποιο CSS φορτώνεται σε ποια ανάλυση. Εννοείται ότι στα extra αρχεία CSS κάνετε overwrite ΜΟΝΟ τα tags που απαιτούν ρύθμιση ώστε να φαίνεται η σελίδα μας όπως πρέπει. Δε χρειάζεται να αντιγράψετε όλο το αρχικό CSS αρχείο σας.

Κατεβάστε το script από το site της Particletree.