Créer mises en page fluides avec HTML5 et CSS3, Creative Bloq
Personne ne se souciait beaucoup que les peines avaient l'air un peu différent sur un écran par rapport à l'autre. Cependant, comme modèles à base de CSS ont repris, il a permis à des conceptions basées sur le Web à plus près imprimer mimétique. Avec cette transition, pour beaucoup (y compris moi-même), mises en page proportionnellement sur la base diminuaient depuis de nombreuses années en faveur de leurs homologues rigides, à base de pixels.
Mais comme toutes les choses, conceptions proportionnelles sont revenus autour. La Mini, les cheveux permanentés (je veux!) Et un jean évasé ont tous fait leurs retours au fil des ans. Maintenant, il est temps pour les dispositions proportionnelles à faire une nouvelle apparence.
- Logiciel: éditeur de texte, navigateur
- temps du projet: 1-2 heures
- Compétences. Découvrez pourquoi dispositions proportionnelles sont nécessaires pour la conception sensibles, la conversion des largeurs d'éléments à base de pixels à des pourcentages proportionnels, convertir les tailles de typographie à base de pixels à leur équivalent en fonction em, comprendre comment trouver le contexte pour tout élément
- Fichier de support
01. Mises en page fixes ne sont pas à l'épreuve
02. Pourquoi dispositions proportionnelles sont essentielles pour les conceptions sensibles
Alors que les requêtes des médias sont puissants, nous sommes maintenant au courant de certaines limites. Toute conception de largeur fixe, en utilisant uniquement les requêtes des médias à adapter pour différentes fenêtres, se simplement « pression » d'un ensemble de règles de requête de médias CSS à l'autre sans progression linéaire entre les deux.
Au lieu de cela, nous voulons créer un design qui fléchit et semble bon sur toutes les fenêtres, pas seulement les particuliers spécifiés dans une requête de médias. Je vais couper à la chasse: nous devons changer nos fixes, mises en page à base de pixels à les fluides, proportionnels. Cela permettra à des éléments à l'échelle par rapport à la fenêtre jusqu'à ce qu'une requête média ou d'une autre modifie le style.
03. mises en page proportionnelle et requêtes des médias
04. Modification d'un motif dans un agencement fixe à une proportionnel
05. Une formule à retenir
cible contexte ÷ = Résultat
06. Faire place Layouts des fluides
Ce qui est important de noter ici est le CSS que nous utilisons actuellement pour définir les largeurs des principaux éléments de structure (en-tête, navigation, barre latérale, le contenu et le pied de page). J'ai omis plusieurs des règles de style que nous pouvons nous concentrer sur la structure:
Toutes les valeurs sont actuellement définies en utilisant des pixels. Travaillons de l'élément le plus externe et les modifier en pourcentages proportionnels à l'aide de la cible ÷ contexte = formule de résultat.
07. Définition d'un cadre pour des éléments proportionnels
Nous avons besoin de quelque chose à « tenir » et de devenir le contexte de tous les éléments proportionnels (le contenu, la barre latérale, pied de page, etc.) nous avons l'intention de contenir dans notre conception. Il faut donc définir une valeur proportionnelle à la largeur que la #wrapper doit être par rapport à la taille de la fenêtre. Pour l'instant, nous allons faire tomber un rien et rouler avec 96 pour cent et voir ce qui se passe. Voici la règle modifiée #wrapper:
Et voici à quoi il ressemble dans la fenêtre du navigateur:
Jusqu'ici tout va bien! 96 pour cent fonctionne très bien ici, même si nous aurions pu opter pour 100 ou 90 pour cent - quel que soit fixé la conception au sein de la fenêtre de la manière la plus agréable esthétiquement.
Après avoir modifié toutes les largeurs de pixels en pourcentages, le CSS concerné ressemble à ceci:
La capture d'écran ci-dessous montre le résultat dans Firefox avec la fenêtre autour de 1000 px de large:
Le développement de la mise en page fluide, vu dans Firefox
08. On ne peut pas simplement arrondir les chiffres?
09. La conversion des autres éléments de mise en page
Tout semble toujours très bien à la taille de la fenêtre. Cependant, la zone de navigation ne se comporte pas. Si j'amener la taille de la fenêtre en un peu, les liens commencent à s'étendre sur deux lignes:
C'était assez facile! Vérifions que tout est correct dans le navigateur.
Le résultat de notre changement à la mise en page de lien: la fixation d'un problème a créé un autre
10. Rappelez-vous toujours le contexte
Comme cela est souvent le cas, il se trouve qu'il existe différentes façons de résoudre ce problème. Nous pourrions ajouter une largeur explicite à la
On pourrait plutôt modifier le CSS pour la
Et voici comment le résultat regarde dans le navigateur avec une fenêtre 1200 px de large:
La navigation devient là maintenant, mais je dois encore le problème des liens de navigation couvrant deux lignes que la fenêtre devient plus petite, au moins jusqu'à ce que je ci-dessous 768 px de large, lorsque la requête des médias, nous avons écrit plus tôt [dans le chapitre 2 du livre à partir de laquelle cet article est un extrait] remplace les styles actuels de navigation. Avant de commencer à fixer la navigation, je vais passer toutes mes tailles de typographie de pixels de taille fixe à l'unité proportionnelle, sme.
11. A l'aide ems plutôt que des pixels pour la typographie
Voici deux raisons évidentes: d'une part ceux qui utilisent encore Internet Explorer 6 (oui, ces deux personnes) obtient automatiquement la possibilité de zoomer le texte; et d'autre part, il rend la vie pour vous, le concepteur / développeur, beaucoup plus facile.
En utilisant notre même cible ÷ contexte = formule de résultat, je vais convertir toutes les tailles de police à base de pixels à ems. Il est bon de savoir que tous les navigateurs de bureau modernes utilisent 16 px comme la taille de police par défaut (sauf indication contraire). Par conséquent, dès le début, l'application de l'une des règles suivantes à l'étiquette du corps fournira le même résultat:
Comme 48 ÷ 16 = 3, nos changements de style comme suit:
Notre nouveau ressemble CSS basé em-ce:
Vous pouvez voir ici que la taille de la police (qui était de 38 px) de la élément est en relation avec l'élément parent (qui était 69 px). En outre, la hauteur de la ligne (qui était 40 px) est réglé par rapport à la police elle-même (qui est de 38 px).
Mais qu'est-ce est un em?
Le terme « em » est tout simplement une façon d'exprimer la lettre M sous forme écrite et se prononce de la même manière. (Historiquement, la lettre M a été utilisée pour établir la taille d'une police donnée, car il est le plus grand des lettres.) De nos jours, em comme mesure définit la proportion de la largeur et la hauteur d'une lettre donnée par rapport à la taille du point de une police donnée.
Aller plus loin
Cet article est un extrait exclusif du livre de Ben Frain Responsive design Web avec HTML5 et CSS3, publié par Packt Publishing. L'édition livre électronique coûte actuellement 12,71 £, et l'édition imprimée £ 22,49, y compris le livre électronique. Vous pouvez les acheter à la fois ici.