Quelle est la meilleure façon de déplacer un élément qui se trouve du haut vers le bas dans Responsive design

J'ai le texte suivant format HTML, ce qui est la façon efficace de position de l'élément donné en haut sur un ordinateur de bureau et en bas sur les appareils mobiles (largeur < 640pixels)? Depuis il ya beaucoup de différents appareils, je ne veux pas écrire les coordonnées de la position puisque le contenu de la page de la hauteur varie. Des suggestions?

<html>
<head>
..
</head>
<body>
..
<p>I am on the top of desktop page, and bottom of mobile page</p>
...
</body>
</html>

source d'informationauteur Suthan Bala

La réorganisation des éléments de l'inconnu hauteurs dans un réactif de la mode est préférable de faire avec Flexbox. Alors que le soutien n'est pas idéal pour les navigateurs de bureau (c'est à dire d'être le principal facteur limitant ici, le soutien commence avec la v10), la plupart des navigateurs mobiles ne soutien.

http://cssdeck.com/labs/81csjw7x

@media (max-width: 30em) {
  .container {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    /* optional */
    -webkit-box-align: start;
    -moz-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
  }

  .container .first {
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
  }
}

http://caniuse.com/#feat=flexbox

Être conscient que Flexbox peuvent entrer en conflit avec d'autres méthodes de présentation, tels que la grille standard techniques. Flex éléments qui sont mis à flotteur peut provoquer des résultats inattendus dans les navigateurs Webkit à l'aide de l'2009 spécification (display: -webkit-box).

5

Une meilleure compatibilité que flexbox peut être réalisé avec display: table-footer-group (IE8+)

Effet inverse: pour déplacer un élément de plus que c'est dans le code HTML, vous pouvez essayer de table-caption et table-header-group.

Ne fonctionne pas avec l'auto-remplacer les éléments comme img ou inputau moins sur Chrome (et c'est tout à fait normal) mais bien avec div par exemple.

EDIT: c'est 2016 donc Flexbox (et Autoprefixer) toutes les choses \o/
1

Je ne sais pas si c'est la meilleure approche, mais vous pouvez reproduire le même élément sur lequel vous souhaitez jouer avec le display: none/display: inline-block attribut. Lorsqu'il est visualisé sur un ordinateur de bureau, votre css dit qu'il affiche à la une sur le dessus et pas celui du bas. Ensuite, lors de l'affichage sur mobile, il ne devrait pas afficher la une sur le dessus et afficher le seul en bas.

Comme je l'ai dit, je ne suis pas sûr que c'est le moyen le plus efficace de le faire, mais il fonctionne. Si quelqu'un a une meilleure solution, je serais ravi de l'entendre.
0

Je suppose que quand vous dites "position" tu veux dire de sorte qu'il ne bouge pas lorsque vous faites défiler. Dans ce cas, vous pouvez utiliser:
```
p.className {
  position: fixed;
  bottom: 0; //for mobile devices
  top: 0; //for desktops
}
```
Où p élément est un attribut de classe comme ceci:
```
<p class="className">I am on the...</p>
```
bas & top serait de ne pas exister au même moment, vous aurez à charge de l'pertinentes l'une fondée sur l'appareil. Pour le bureau, vous aussi, vous avez besoin pour compenser votre contenu à la hauteur de la div, de sorte qu'il n'est pas caché sous le fixe div

Vous devez vous connecter pour publier un commentaire.