1. Accueil
  2. Question et réponse
  3. comment fluidifier mon site?

comment fluidifier mon site?

2012-03-19 7 views
0

Je n'ai jamais fait ça auparavant. Le site que je viens de construire est le second que j'ai construit. Il y a un conteneur div principal et un en-tête. J'ai remarqué que ce simple site html/css et js a l'air terrible sur les appareils mobiles.comment fluidifier mon site?

Quand il s'agit de rendre le site fluide, y a-t-il des règles ou des approches pour le rendre rapide et facile? Si je commence juste à changer toutes les largeurs de pixels en pourcentages, les éléments perdront-ils leur alignement les uns par rapport aux autres? Par exemple, l'image dans le curseur de l'image principale est alignée, en utilisant des pixels, en fonction de la position du logo dans l'en-tête.

Avant de commencer tout pointeur serait le plus apprécié. Voici le site: www.hauswoods.com

Source

2012-03-19 Doug Fir

Répondre

0

Si vous souhaitez que votre site Web soit fluide, utilisez simplement le pourcentage au lieu des pixels.

.classname{ 
    width: 80%; 
}

Source

2012-03-19 13:44:16

+0

Merci. Ma préoccupation est cependant de perdre le positionnement par rapport à d'autres éléments. Les largeurs de pixels actuelles maintiennent différents éléments alignés en fonction d'autres éléments sur le site. Si seulement il y avait une ligne magique de code qui a mis à l'échelle l'ensemble du document dans un oner –

1

Une approche rapide et facile serait d'utiliser un cadre comme Bootstrap (http://twitter.github.com/bootstrap/)

Je suis sûr que certains les gens diraient que vous n'apprendrez pas si vous utilisez cela (parce que cela fera beaucoup pour vous), mais je pense que vous pouvez apprendre par l'exemple. Bootstrap utilise des principes d'amélioration progressive pour améliorer les interfaces utilisateur et utilise quelque chose appelé 'Less' pour rendre CSS un peu plus générique (au prix d'une certaine complexité). Pourtant, vous pouvez utiliser les bits que vous aimez. Si vous avez un site vierge, c'est un bon point de départ. Il prend en charge les dispositions fluides et vous explique comment votre conception se dégradera sur les appareils mobiles avec des écrans plus petits.

Source

2012-03-19 13:41:17

6

Je vous suggère de regarder dans media queries au contraire, cela vous permettra de spécifier CSS liées aux différentes tailles d'écran. Oui, vous pouvez changer votre site web pour une mise en page liquide/fluide, mais avec votre contenu actuel, obtenir le curseur et les images à regarder correctement sera un casse-tête.

Source

2012-03-19 13:44:40

Questions connexes

 Questions connexes