La détection de la Résolution de l'Écran pour charger alternative CSS une bonne idée?
Je travaille avec un graphiste qui veut donc constamment à rendre les sites web plus grande que la 960 pixels, je recommande. Je peux faire une certaine quantité de liquide des mises en page mais id aiment vraiment être en mesure de charger une autre feuille de style CSS pour les grandes résolutions. Je l'ai googlé et trouvé le lien ci-dessous, mais im peur que je havnt entendre plus à ce sujet. C'est que c'est une méthode fiable? Im peur que je l'aurais pensé que plus de gens veulent le faire.
http://www.ilovecolors.com.ar/detect-screen-size-css-style/
Grâce
Entendez-vous la résolution de l'écran?
Oui, ont mis à jour la question. Merci
J'aime le design de ce site.. css-tricks.com
Oui, ont mis à jour la question. Merci
J'aime le design de ce site.. css-tricks.com
OriginalL'auteur Evanss | 2011-03-02
Vous devez vous connecter pour publier un commentaire.
Simplement de répondre à votre question: Non.
Même s'il l'était, il semble inefficace pour générer plusieurs fichiers CSS, etc. Il existe de meilleures façons de s'appuyer sur la résolution.
Une plus longue haleine réponse:
Lorsque 960 devient "oh, c'est tellement 2010..." combien de vos sites se regarde daté? En même temps, pas tout le monde qui navigue sur internet a un 30" écran de Cinéma, ou d'un double écran de configuration. J'essaie de conception pour mieux s'adapter à MON trafic.
Bien qu'il peut être agréable de détecter le navigateur largeurs de fenêtre, et/ou les largeurs d'écran (résolution d'écran), je pense que l'opinion de la majorité est-ce: Connaître votre public cible et de conception/construction.
La construction d'une 960 de la grille et CSS, puis la construction d'un 1024 grille et un CSS = Inefficacité, et pas très "future proof".
Si vous regardez le trafic de votre site et de voir que 90% de vos visiteurs à l'aide de 1 ou 2 (ou 3) résolutions, de construire un design fluide qui fonctionne bien pour ce public.
Dispositions fluides sont probablement la meilleure solution universelle à la progression constante de l'ensemble de périphériques, de résolutions, de la fenêtre d'affichage des tailles, des définitions d'écran (faible, moyen, élevé) sur le marché aujourd'hui, et encore moins 18 mois à partir de maintenant.
Checkout @media queries pour les ajouter à un fluide de mise en page/conception. Modifier un fichier CSS (pas 3). http://www.w3.org/TR/css3-mediaqueries/
@media screen and (max-width:960px) {
h1, h2 { color:#990000; font-size:1.4 em; }
}
@media screen and (max-width:1280px) {
h1, h2 { color:#336699; font-size:1.8 em; }
}
Ajouter
min- and max- widths
à votre CSS (ou une logique similaire) peut également aider à satisfaire une plus large gamme de résolutions/navigateur tailles, ainsi que de donner votre conception une plus longue durée de vie. Et ne repose pas sur un document.de la fenêtre.largeur() fonction.Obtenir la plupart de coup pour votre mâle. Liquide de dessins, @media queries, javascript afin de les aider à combler certaines lacunes. Vous vous retrouverez avec moins de code, plus de "l'avenir" de la conception, et un plus grand pourcentage de visiteurs satisfaits.
Ce que je pensais faire c'est de la création de la norme 960 conception, puis de le modifier pour les écrans de grande taille, et en sélectionnant la nouvelle css avec les media queries. Comme le lien que tu m'a donné est W3C puis-je suppose que c'est largement pris en charge et conforme aux normes, etc? Merci
Une chose de plus, ce sont leurs sites de haut profil faisant cela? Im sûr un grand soucieux de son image de marque ont les ressources nécessaires pour utiliser cette technologie. Encore une fois, cela semble trop beau pour être vrai et que je n'ai pas entendu de nombreuses études de cas, im un peu nerveux. Merci
D'autres styles (de mods pour principales classes, id), oui pas une grosse affaire. Il serait un élément nécessaire pour une souplesse qui fonctionne bien dans une collection de navigateur/taille d'écran. @media queries sont CSS3, de sorte que chaque navigateur va les reconnaître; toutefois, un plugin jQuery a été conçu pour combler l'écart. Vous avez également mentionné que la 960 standard...je suis actuellement en train de travailler au sein d'une 978 système qui fonctionne (je pense) juste un peu mieux. La caisse de ce lien: 978.gs. Regardez la démo, puis vérifier le code source. Ce site particulier est d'utiliser à la fois @media, ainsi que l'jQ méthode.
Votre dernier commentaire était intéressant...donc je snooped autour. http://www.apple.com (à l'intérieur de leur page d'accueil
<head>
); http://www.adobe.com - (à l'intérieur "de la page d'accueil-marthe.css") --> Ils sont assez connus :-). Voici un article intéressant sur le sujet: 24ways.org/2010/life-beyond-media-queriesOriginalL'auteur Dawson