2012-04-16 6 views
2

Je suis récemment tombé sur ce site web: http://community.saucony.com/kinvara3/ et http://www.tokiolab.itcontenu de redimensionnement automatique - une page site

Si vous regardez ils de ce site sont tous d'une page, mais les échelles de contenu comme si tout sont simples pages.

Je pense qu'il est bon que le contenu s'adapte automatiquement à la résolution de votre navigateur (lors du redimensionnement) même s'il s'agit d'un site Web d'une seule page.

Est-ce une nouvelle technique? Est-ce difficile d'écrire un tel plugin ou existent-ils déjà?

quelqu'un L'espoir peut me aider

+0

Pourquoi le pouce vers le bas :(Je suis ici pour apprendre .. Si je vois quelque chose de cool sur le web, je demande des directions pour apprendre/réaliser ces fonctions – idbranding

+0

Au risque de retentir pat, CSS a pour cent en tant que type d'unité qui peut être utilisé pour arranger les choses en termes de pourcentage de l'élément contenant – ben

+0

toutes les directions pour moi pour en savoir plus à ce sujet? – idbranding

Répondre

5

Faire des sites Web s'adaptent à une variété de tailles d'écran est, comme les spectacles Dominic, un livre entier, pas une solution miracle.

Il semble que vous cherchiez simplement à avoir plusieurs sections empilées, chaque section étant la hauteur de l'écran. Est-ce correct?

Ce seul, est pas trop difficile:

Définissez la largeur et la hauteur sur les éléments du corps et html à max sur la page. Je sais, c'est bizarre que vous ayez à définir l'élément html aussi, mais c'est la vie.

html, body { 
    width:100%; 
    height:100%; 
} 

Dans votre balisage, définissez vos sections.

<section>...</section> 
<section>...</section> 
<section>...</section> 

Et redimensionnez vos sections pour les adapter au chargement et lorsque la page est redimensionnée. Quelque chose comme:

function draw() { 
    var width = $(document).width(); 
    var height = $(document).height(); 

    $("section").width(width).height(height); 
} 

$(document).resize(draw); 
$(draw); 

Si vous aussi ce que le défilement pour enclencher les sections, définir ce qui est fixe et qui défile avec la page, des animations d'entrée et de sortie, etc ... qui devient plus impliqué. Je ne sais pas s'il existe un plugin simple qui le fera pour vous. Le plus proche pourrait être impress.js (http://bartaz.github.com/impress.js/).

+0

Tout d'abord, merci pour le départ! Je vais l'essayer et venir avec un jsfiddle .. – idbranding

0

Le principe que vous êtes à la recherche est responsive design, il y a une tonne d'articles autour de ce sujet.

Un bon livre est http://www.abookapart.com/products/responsive-web-design

Article: http://www.alistapart.com/articles/responsive-web-design/

Aussi, si vous souhaitez modifier certaines fonctionnalités que vous pouvez simplement utiliser des requêtes média

http://www.w3.org/TR/css3-mediaqueries/

+1

Ce site ne fonctionne pas du tout. Il a simplement une méthode de défilement de la page. –

+0

Je sais réactif, mais ces sites ne semble pas utiliser les médias – idbranding

+0

Responsive ne doit pas utiliser des requêtes de médias, juste des unités de pourcentage, etc. Je sais que les sites en haut ne sont pas responsive @RoryMcCrossan mais la meilleure approche est d'utiliser repsonsive design –

0

Comme Val a dit, à faire avec des effets de défilement que la taille de la page.

Ces deux exemples ressemblent à des pages Scrollorama (http://johnpolacek.github.com/scrollorama/)

Une autre bonne est http://www.nikebetterworld.com/product.

+0

Je sais comment les événements de défilement sont faits, je étais juste curieux de savoir comment le redimensionnement fonctionne, si vous regardez ces sites Web, le contenu correspond automatiquement à la hauteur/largeur du navigateur, bien qu'il s'agisse d'un site Web d'une seule page. – idbranding

Questions connexes