Bonjour,

je cherche a réaliser un site full responsive en one page, one screen ( pas de scroll ), en résumé :

/*je fixe un container en width et en heigth */
/*la width est adapté en mediaqueries selon largeur d'écran

.container {

width : xxx px;
height: 100vh

}

Ce n'est pas un site avec une image et un menu seulement.

Tout le contenus 'affiche donc dans un écran et au centre avec plusieurs animation entre autre.

Toute la difficulté réside donc à adapter le contenu fixe pour rentrer dans chaque écran correctement.

En effet, les écrans n'ont pas les même proportions hauteur/largeur, ce qui invalide l’utilisation de mesure relative  ( % , vh ou vw ).

En effet, pour l'exemple, sur du 1920*900 , un block en 26vw*55vh donne un carré de 500*500. Faites la même chose sur un écran 1280*800, forcement, on a plus un carré.

Gênant donc.

M'est donc venu à l'idée, comme seul solution, de récupérer largeur et hauteur des écran utilisateurs à chaque chargement de page, puis à l'aide d'une algo ressortir des chiffres précis pour chaque mesure.

Problème..ce genre de chose est bon au chargement d'une page, mais ne fonctionne pas si l'on redimensionne à la volée.

J'ai donc deux questions :

Dois ton considérer la pratique du responsive uniquement lors du chargement du dom ? ou obligatoirement dans toutes situation tel que le redimensionnement. ( je pense avoir ma réponse rien qu'avec les mobiles/tablettes => portrait ou paysage = non recharge )

Dois je oublier le site one screen ( version complet, pas une pauvre image ! ) ? est ce juste impossible à réaliser en full responsive ?

Merci par avance

-
Edité par zigomario 1 décembre 2016 à 19:31:56

Bonjour Zigomario, je vois que tu te poses pas mal de questions et je vais essayer d'y répondre.

zigomario a écrit:

J'ai donc deux questions :

Dois ton considérer la pratique du responsive uniquement lors du chargement du dom ? ou obligatoirement dans toutes situation tel que le redimensionnement. ( je pense avoir ma réponse rien qu'avec les mobiles/tablettes => portrait ou paysage = non recharge )

C'est mieux de prendre en compte toutes les situations, redimensionnement comme chargement.

Dois je oublier le site one screen ( version complet, pas une pauvre image ! ) ? est ce juste impossible à réaliser en full responsive ?

C'est tout à fait possible. Je ne comprends pas vraiment ce qui te pose problème. Si un de tes block est carré sur un support et rectangulaire sur un autre ca change quoi? Si tu veux absolument des carrés, tu peux toujours choisir une unité fixe comme le pixel. Je pense que tu devrais te mettre sur un cas concret pour te faire une idée.

Merci de ton apport.

Pour être précis, j'ai déja fait le site, en responsivant , comme un couillon, que sur la largeur.

Ma problématique est que le design est autour d'une div "ronde".

Une div ronde c'est pas la joie en responsive et j'ai bien besoin d'un rond tout le temps

Mais du coup, je vais opter pour les mesures fixes je pense.

C'est vrai que je m'oblige à un rendu identique sur tout écran, avec métrique exactement pareil( sauf mobile ou tablette) mais en faite je me trompe.