Comment faire une mise en page de compatibilité mobile Deux Site Web Colonne ()
Préliminaires
Existant deux colonnes Code CSS n'a pas d'importance (beaucoup)
Le premier type de structure HTML: Contenu Première
En d'autres termes, pour ceux d'entre vous avec ce type de structure, la solution est incroyablement simple.
Pour ceux qui préfèrent tout mettre dans un seul fichier, voici la même chose recueillie ensemble dans une feuille de style:
Le code ci-dessus arrive à utiliser le CSS décrit dans mon tutoriel à deux colonnes pour créer les colonnes, mais vous pouvez toujours remplacer votre propre code 2 colonnes à sa place.
Compatibilité du navigateur. Lorsque vous codez votre CSS de cette façon, ce que les gens qui utilisent les anciens navigateurs web voir? Par « vieux navigateurs », je veux dire les versions des navigateurs qui ne mettent pas en œuvre l'installation de requêtes de médias.
Tout le monde à l'aide d'un navigateur de téléphone mobile, que ce soit ancien ou nouveau, sera obtenir la mise en page de colonne.
Tout le monde en utilisant un navigateur de bureau moderne aura la mise en page à deux colonnes.
Tout le monde en utilisant un ancien navigateur de bureau va obtenir la mise en page de colonne.
Étant donné que le code à deux colonnes n'est pas enfermé dans un ensemble de conditions de requêtes des médias, il applique au début de tous les navigateurs. Ensuite, lorsqu'un navigateur mobile rencontre la section requêtes des médias, il appliquera les règles supplémentaires dans cette section. Depuis les #content et #navbar blocs div sont déjà flottaient sur le flux de documents à ce moment, grâce au code à deux colonnes plus tôt, les nouvelles règles doivent tout défaire. Elle le fait par la mise en float: none pour annuler float: right. et largeur: 100% pour inverser les paramètres de largeur de 80% et 20%.
L'effet de l'écriture des règles CSS de cette façon est d'influer sur la compatibilité du navigateur ainsi:
Tout le monde à l'aide d'un navigateur de bureau, que ce soit ancien ou nouveau, obtiendra la mise en page à deux colonnes.
Tout le monde à l'aide d'un navigateur mobile moderne aura une mise en page de colonne.
Tout le monde en utilisant un ancien navigateur mobile obtenir une mise en page à deux colonnes.
Le deuxième type de structure HTML et comment déplacer un bloc DIV HTML Ignorer ordre
Que faire si votre code HTML est disposé comme suit?
Dans ce cas, vous ne voulez pas la mise en page mobile pour suivre l'ordre HTML, car la première chose qu'un visiteur verra le menu de navigation plutôt que le contenu. Vous avez besoin d'un moyen de déplacer le deuxième bloc DIV afin qu'il soit présenté avant la première.
Le problème est que pour résoudre facilement, vous aurez besoin d'utiliser les nouvelles installations CSS box flexibles (ou « boîte flex » / « FlexBox » comme il est communément connu) qui ne sont mises en œuvre de manière fiable dans les navigateurs modernes. Et quand je dis les navigateurs modernes, je veux dire les versions qui sont encore plus récente que la liste I pour le soutien des spécifié questions des médias. Par exemple, ma page Web simple de démonstration de FlexBox nécessite au moins les versions de navigateur suivantes:
navigateurs Desktop: Internet Explorer ( "IE") 11, Microsoft Edge, Firefox 28 ou version ultérieure, Chrome 29 ou version ultérieure, Safari 9 ou plus, Opera 12.1x (Presto), Opera 17 (Webkit / Blink) ou version ultérieure.
Navigateurs mobiles: Safari (version iOS) 9.2 ou version ultérieure, Android 4.4 ou plus tard, Blackberry 10, Opera Mobile 12.1 ou version ultérieure, ou IE mobile 11.
Nous allons disséquer le code.
Sur 630 résolutions ci-dessous pixels, je mis en flux flex: colonne. agencer les blocs DIV clos verticalement au lieu d'horizontalement. Comme je veux #content venir en premier dans ce cas, je donne l'ordre: 1. et définissez l'autre bloc à l'ordre: 2. Oui, il est aussi simple que cela: vous définissez l'ordre des blocs en donnant simplement une valeur numérique . Et 1 vient avant 2, qui vient avant le 3, et ainsi de suite.
Il y a une autre installation que j'utilise de la famille FlexBox des règles: aligner-éléments: étirement. Notez que la colonne de navigation dans la démo de la boîte flex a la même hauteur que le contenu d'un en mode deux colonnes, même si je ne gonflez pas cette colonne avec des lignes vides et je ne ai utiliser une hack CSS laid pour l'accomplir. Ce ALIGN-éléments: règle extensible provoque le navigateur pour étirer le bloc de sorte que les hauteurs des DIVs enfants sont égaux en flex-flow: Mode de rangée, et les largeurs sont égales à flex-flow: Mode de colonne.
Chapitre suivant
Il apparaîtra sur votre page: