Construire un site réactif de base avec CSS, Bloq Creative
Tout le monde parle de web design réactif. Mais tout le monde comprend ce qu'il est pour? Je ne suis pas sûr. De nombreux concepteurs de sites Web et les développeurs me semblent avoir mal compris le problème, il essaie de résoudre.
Responsive Web Design est principalement devenu un sujet brûlant car de plus en plus de gens utilisent des appareils mobiles tels que les iPhones, iPads et BlackBerry pour accéder à Internet.
Si vous pensez des nouvelles inventions, nous verrons inévitablement à l'avenir, alors une mise en page d'adaptation qui peut répondre automatiquement aux préférences des utilisateurs devient un produit indispensable et très précieux.
la frustration des utilisateurs
Certaines personnes croient qu'il est normal de couper fonctionnalités et d'éliminer le contenu qu'ils croient est non essentielle à l'utilisateur. Mais comment pouvez-vous être sûr que les informations que vous coupez ou pousser vers une page secondaire n'est pas le contenu qui est le plus important pour moi? Vous ne pouvez pas.
J'ai essayé mon iPad et il était complètement différent à nouveau - et toujours pas de signe de l'information de l'académie que je cherchais.
la procédure pas à pas
L'élément clé de la flexibilité dans la conception réactive est une largeur de mise en page fluide. Tout ce que vous devez faire est de créer un emballage, le contenu et la largeur des colonnes qui s'adapter à différentes largeurs de l'appareil. Il n'y a rien de nouveau, mais est maintenant plus important que jamais. Pour garder les choses simples, je vais vous montrer comment créer une page fluide composé de navigation, image caractéristique et deux colonnes, qui prend en considération la mise en page sur différents appareils de taille. Vous remarquerez que j'ai respond.min.js inclus. qui est un polyfill léger qui permet aux questions des médias de travailler dans IE6-8. Voici la structure HTML de base:
Affichage de la mise en page de tutoriel sur un grand écran, largeur max empêche de se dilater trop loin
Interrupteur de navigation principale
La propriété width contrôle la taille de la fenêtre. Il peut être réglé à un nombre spécifique de pixels comme largeur = 960 ou à la valeur de l'appareil de largeur qui est la largeur de l'écran en pixels à une échelle de 100%. La propriété initiale échelle contrôle le niveau de zoom lorsque la page est d'abord chargée. La échelle maximale, échelle minimale et des propriétés évolutives utilisateur contrôlent la façon dont les utilisateurs sont autorisés pour zoomer la page ou arrière.
La combinaison d'une série de grappins permet à l'impact des transitions entre les tailles d'écran pour apprécier pleinement
Quelque chose qui va nous aider énormément avec la mise en page fluide, et que je suis très excité, est la mise en page Boîte flexible Module. FlexBox, comme il est également connu, fournit un procédé de redimensionnement automatique des éléments au sein de leur parent sans avoir à calculer la hauteur et la largeur. En plus de changer dynamiquement la taille d'un élément, FlexBox peut également appliquer des propriétés à un parent qui contrôle où un espace vide est distribué. Si vous n'êtes pas au courant de FlexBox puis vérifier les articles de Peter Gasston.
- Ce tutoriel a reçu un examen technique de Stephanie Rieger
- Cet article a paru dans le numéro 231 du magazine .net - best-seller mondial magazine pour les concepteurs et les développeurs Web.