Comment gérer les différentes résolution d'écran/taille de l'écran lors du développement d'un site?
Je souhaite développer un site à l'aide de jQuery qui fonctionne avec tous les principaux navigateurs. Je pensais commencer avec une base de mise en page (en-tête, un couple d'onglets avec le contenu et le pied de page). Je me demande comment dois-je créer cette disposition pour prendre en charge différentes résolution de l'écran, taille de l'écran, ou la taille de la fenêtre. Devrais-je travailler en pixels /points /pour cent lors de la définition de la largeur et de la hauteur des composants ? Existe-il des plugins jQuery qui peut m'aider dans cette tâche ? Merci !
- Qu'en plaine media queries?
Vous devez vous connecter pour publier un commentaire.
Il y a un certain nombre de solutions à ce problème, mais ils sont principalement dépendantes de ce type de contenu que vous souhaitez partager à travers le site (c'est à dire intégré les vidéos ou les images ont une taille finie) et de l'aspect que vous allez pour.
Pour les mises en page web qui fonctionne bien dans plusieurs navigateurs et dans un large éventail de tailles de fenêtre, vous devriez être à la recherche à la "mise en page Liquide". Ci-dessous quelques liens vers des tutoriels à propos de ces dispositions.
Vous pouvez également utiliser du Javascript (notamment jQuery) pour ajuster le style/le contenu basé sur la résolution de la fenêtre (par exemple, la modification d'un multi-colonnes de mise en page à une seule colonne mise en page pour les écrans plus petits, tels que les téléphones mobiles). Ceci est appelé "Adaptation de Contenu".
C'est un simple script que j'ai utilisé dans le passé (à l'aide de jQuery):
La largeur de la page valeurs utilisées dans le code sont arbitraires et ont été ajustés pour travailler sur un site, donc n'hésitez pas à les régler comme souhaité.
Aussi, à l'intérieur de chacun de ces fichiers CSS est juste un minimum de CSS qui définit la largeur de grands conteneurs/emballages et même l'image de fond.
Mise à jour #2: Si vous êtes en essayant de maintenir un code HTML valide. Ensuite, vous pouvez ajouter toutes les feuilles de style CSS dans le head de votre page (avec un attribut title dans chacune):
Ensuite utiliser ce script. Vous pouvez obtenir un flash blanc si vous avez inclus des images de fond dans votre CSS, alors assurez-vous de définir une feuille de style CSS.
de jQuery cant vous aider à le faire. Vous devez obtenir le blocage de base en HTML et CSS. L'utilisation de Javascript et de jQuery si vous en avez besoin, ne l'utilisez pas simplement pour l'utiliser. Vous devez travailler avec des pixels ou en pourcentages quand il s'agit de dimensions sur le web. Les Points sont pour l'impression. Les tailles de police devrait être mis en EMs ou en pixels.
Une disposition fixe est le plus commun pour des pages web normales, et en utilisant la grille des cadres comme 960gs, vous avez un moyen facile de prise de gthe proportions look décent tout en continuant à soutenir la grande majorité des résolutions d'écran. Il est également beaucoup plus facile d'adapter les graphismes à une mise en page à largeur fixe, et en même temps faire de la page facile à utiliser.
Garder à l'esprit lorsque vous/si vous utilisez des pourcentages des lignes de texte de plus de 600 à 800 pixels est difficile ou lente à lire. Aka avoir une zone de contenu de 80% pourrait être une bonne idée pour une fenêtre qui est 1000px de large, mais si vous avez une fenêtre d'affichage de 1900px, le site devient pour la plupart inutilisables.
Et on le fait habituellement pas explicitement défini une hauteur sur les choses, comme la hauteur sera automatiquement augmenter le contenu du récipient augmente. Bien sûr, vous pouvez régler la hauteur sur certaines choses, mais tout dépend de ce que, vraiment.
Donc, à l'aide d'une dynamique ou largeur fixe, tout dépend de votre contenu.
Basé sur votre décrit les besoins, je vous recommande fortement de regarder les "Grilles" fichier css dans le Yahoo User Interface (YUI) de la bibliothèque, vous pouvez trouver le fichier et de la documentation ici: http://developer.yahoo.com/yui/grids/.
Les grilles du paquet d'installation de base comprend un en-tête, le corps et le pied de page. Vous pouvez supprimer l'en-tête et/ou pied de page si vous le souhaitez. Le corps peut être divisé à l'aide d'un imbriquée modèle de grille et une variété de modèles sont inclus.
Personnellement, je commence à l'ensemble du HTML/CSS pages que j'ai faites avec le combiné "reset-polices-grilles" fichier de YUI. Il vous fournit une croix-navigateur css reset fichier, les grilles de fichier, et certains normalisé de classes pour les polices de caractères.