Quelle dimension minimale choisir pour son site
flexi2202
Messages postés
3640
Date d'inscription
Statut
Membre
Dernière intervention
-
flexi2202 Messages postés 3640 Date d'inscription Statut Membre Dernière intervention -
flexi2202 Messages postés 3640 Date d'inscription Statut Membre Dernière intervention -
bonjour a tous
voila je vais commencer a tout rendre responsive mon site
mais il y a une question qui m interpelle
si on veux on pourrait faire tenir son site sur un des a coudre mais tout serait mis sur une colonne
par exemple si j ai ce texte "bonjour "
il est tout fait possible en diminuant au maximum d avoir
b
o
n
j
o
u
r
et les cadres les avoirs les uns en dessous des autres
en regardant bien la documentation de boostrap
on peux voir ceci
// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }
// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }
// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }
// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }
donc cela veux t il dire que l on doit rendre son site responsive jusqu a minimum 576px et qu ensuite l utilisateur qui a un petit écran devra faire défiler le site sur on écran ou alors retourne son appareil ?
merci de l aide
voila je vais commencer a tout rendre responsive mon site
mais il y a une question qui m interpelle
si on veux on pourrait faire tenir son site sur un des a coudre mais tout serait mis sur une colonne
par exemple si j ai ce texte "bonjour "
il est tout fait possible en diminuant au maximum d avoir
b
o
n
j
o
u
r
et les cadres les avoirs les uns en dessous des autres
en regardant bien la documentation de boostrap
on peux voir ceci
// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }
// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }
// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }
// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }
donc cela veux t il dire que l on doit rendre son site responsive jusqu a minimum 576px et qu ensuite l utilisateur qui a un petit écran devra faire défiler le site sur on écran ou alors retourne son appareil ?
merci de l aide
8 réponses
-
Bonjour,
Alors je te rassure ... si tu utilises bootstrap .. je ne pense pas que tu trouves beaucoup de cas où le site ne s'afficherait pas correctement sur les "petits" écrans.. ( du moins ça ne m'est encore jamais arrivé.. )
Il faut aussi se rappeler que la taille en PX ne dépend pas que de la "taille" de l'écran.. mais aussi de sa résolution...
-
bonjour jordane
merci pour la reponse
en fait avec boostrap on peux faire un peu n importe quoi
surtout avec les card , elles sont responsives a l infini ...
je te donne un exemple
j ai un tableau de cette façon
nom *prenom*adresse*telephone*mail*commentaire
si je veux pousser les choses sur un petit ecran je pourrais avoir ceci
n
o
m
*
p
r
e
n
o
m
*
regarde par exemple bien évidement en mettant des petites valeurs au min-width
et c est la ma question
jusqu au on peux descendre en taille minimum
-
merci pour l aide
donc toi tu pars sur le principe que ta bannière par exemple doit s adapter a toutes les tailles d écran ?
mais alors pourquoi ils indiquent ceci
si j ai bien compris c est quand même pour que la bannière fasse au minimum 576 px et au maximum 1200px
et que si l ecran est trop petit il faut scroller ...
// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }
// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }
// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }
// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }-
Oui ça doit s'adapter à toutes les tailles.
Non ça ne désigne pas les dimensions de ta bannière....
Ce sont les dimensions aux quelles bootstrap detecte tel ou tel type d'écran....
la seule question qui me vient à l'esprit en lisant ce que tu marques c'est as-tu au moins compris comment fonctionne bootstrap et le système de grille ?
Je pense que la réponse est non et que tu devrais suivre des tutoriels qui est en explique le fonctionnement et l'utilité...
-
-
ah ok
juste tu as raison
je viens d aller voir plusieurs site en responsive et c est vrai que cela s adapte a tous les écrans
et des que l on passe une des 4 dimensions mentionne ci dessus
l aspect change (les images et les écritures
ou pourrais je trouver une documentation sérieuse ..
sur le site de bootrap je suppose ? -
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question -
merci pour l aide
oui je connais w3schools
d ailleurs je lisais ceci pour faire défiler une div
https://www.w3schools.com/howto/howto_css_menu_horizontal_scroll.asp
mais bon faut voir si cela va fonctionner en boostrap-
Faut pas non plus prendre tout et n'importe quoi...
Quand je parlais de W3Schools .. c'était concernant "bootstrap" .. et donc https://www.w3schools.com/bootstrap4/
-
-
je ne trouve pas d exemple sur boostrap
mais apparemment cela est a parametrer comme ceci
<div class="row flex-row flex-sm-nowrap pt-3"> -
C'est pas du BS. Mais, il y a quelques conseils : https://github.com/EmmanuelBeziat/guidelines
Et un article sur le minimalisme. N'oublions pas qu'on a pas tous la fibre à 10 Gbps : https://benhoyt.com/writings/the-small-web-is-beautiful/ -
bonjour
merci pour la réponse
j irais voir après les liens
pour ce qui est des media queries et si j ai bien compris
on peux changer l apparence a chaque stade
par exemple on pourrait avoir 4 formats d écriture différents ou 4 aspects différents de notre site
si on a ceci
// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }
// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }
// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }
// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }
