élément "facultatif" dans demo responsive ?

Résolu/Fermé
leito666 Messages postés 74 Date d'inscription mercredi 18 avril 2012 Statut Membre Dernière intervention 15 octobre 2017 - Modifié par leito666 le 7/06/2016 à 22:41
leito666 Messages postés 74 Date d'inscription mercredi 18 avril 2012 Statut Membre Dernière intervention 15 octobre 2017 - 8 juin 2016 à 15:08
Bonsoir :)
Je découvre une démo sur le reponsive mais certain éléments dans le script me semblent pas utile ..

w3schools.com/css/tryit.asp?filename=tryresponsive_col-s

avan :
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-m-1 {width: 8.33%;}
.col-m-2 {width: 16.66%;}
.col-m-3 {width: 25%;}
.col-m-4 {width: 33.33%;}
.col-m-5 {width: 41.66%;}
.col-m-6 {width: 50%;}
.col-m-7 {width: 58.33%;}
.col-m-8 {width: 66.66%;}
.col-m-9 {width: 75%;}
.col-m-10 {width: 83.33%;}
.col-m-11 {width: 91.66%;}
.col-m-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}


après :
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-m-3 {width: 25%;}
.col-m-9 {width: 75%;}
.col-m-12 {width: 100%;}
}

@media only screen and (min-width: 768px) {
/* For desktop: */
.col-3 {width: 25%;}
.col-6 {width: 50%;}
}



mais j'ai un doute ..il s'agit bien de "différents choix" ( customisation ) ou de tailles précise ayant une fonction ?



A voir également:

2 réponses

jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
7 juin 2016 à 23:09
Bonjour,

il s'agit bien de "différents choix" ( customisation ) ou de tailles précise ayant une fonction ?


Pour chaque "taille" d'écran
 @media only screen and (min-width: 600px) {

ici ceux dont la largeur est de 600px au moins

puis la même chose pour les fenêtre d'une largeur de 768px (pour les PC) ..

et puis il pourrait y avoir les écran Extra-larges (résolution 1200px) par exemple ....

etc...

Donc oui.. ça sert à ce que ton CSS utilise les données relatives à la taille de la fenêtre affichée.
Ce qui permet que même si tu réduis la taille de ton navigateur... le site conserve son apparence (en fonction de ce que tu lui a défini pour chaque "résolution" de fenêtre. )
0
leito666 Messages postés 74 Date d'inscription mercredi 18 avril 2012 Statut Membre Dernière intervention 15 octobre 2017
Modifié par leito666 le 7/06/2016 à 23:25
__ << Donc oui.. ça sert à ce que ton CSS utilise les données relatives à la taille de la fenêtre affichée.
Ce qui permet que même si tu réduis la taille de ton navigateur... le site conserve son apparence (en fonction de ce que tu lui a défini pour chaque "résolution" de fenêtre. ) >>

ok c'est uniquement valable pour les class appelés .. dans la démo <div class="col-1 col-m-1"> par exemple n’existe pas donc pas nécessaire de préciser :
.col-m-1 {width: 8.33%;}
.col-1 {width: 8.33%;}
...
0
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649 > leito666 Messages postés 74 Date d'inscription mercredi 18 avril 2012 Statut Membre Dernière intervention 15 octobre 2017
7 juin 2016 à 23:28
Pas sûr de comprendre ta question...
mais prenons un exemple :

Tu veux que ta div corresponde à 1 colonne sur un PC (lorsque ton navigateur est en pleine page) mais qu'elle prenne 100% de la largeur de ta tablette (lorsque tu l'affiches sur une tablette....)
Tu vas utiliser :
 <div class='col-1 col-m-12'>
0
leito666 Messages postés 74 Date d'inscription mercredi 18 avril 2012 Statut Membre Dernière intervention 15 octobre 2017
Modifié par leito666 le 7/06/2016 à 23:50
mais col-1 n'est pas utilisé dans le script ...donc

.col-m-1 {width: 8.33%;}
.col-1 {width: 8.33%;}

ne sert à rien ..
seul col-3 et col-6 marche dans la démo ..
0
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649 > leito666 Messages postés 74 Date d'inscription mercredi 18 avril 2012 Statut Membre Dernière intervention 15 octobre 2017
Modifié par jordane45 le 7/06/2016 à 23:53
Dans la démo ils ont écrit :
<div class="col-3 col-m-12">


Donc POUR CETTE DIV ... il n'y a que les class col-33 et col-m-12 qui sont utilisées.

Mais peut-être que plus tard... dans une de tes pages de ton site .. tu voudras utiliser le col-1 ... ou le col-m-1 ou 4 ou 5 ....
Bref... je ne vois pas où est le problème ???

Dis toi qu'un css comme celui-la ... on le place DANS un fichier .css .... et on l'importe dans TOUTES nos pages...(sans savoir à l'avance ce qu'on va utiliser )

NB : Ils ont aussi utilisé
<div class="col-6 col-m-9">
0
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
7 juin 2016 à 23:56
Au passage ... si ta question précédente (https://forums.commentcamarche.net/forum/affich-33592707-html-regrouper-des-div-id-nom est résolue ... merci de la mettre en "RESOLU" ! (en cliquant sur le lien : "Marquer comme résolu" sous le titre de ta question )
0
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
8 juin 2016 à 11:55

Je cherche seulement à simplifier au max une démo ( qui se doit " NORMALEMENT " d’être clair simple et éficasse hors ce n'est pas le cas )

ce n'est pas le cas ?
clair : je pense qu'elle l'est
- simple : ben.. je ne vois rien de compliqué
- efficace : ça fait se pour quoi c'est prévu...et ça le fait bien. donc oui.


je n'utilise pas de " grid " ..
( je trouve ça pas du tout intéressant / adapté )

C'est ton choix. mais je pense que tu seras l'un des rares à ne pas y passer.
Mais bon.. c'est comme tout... les technologies évoluent, les façons de faire également ainsi que les mentalités. Peut-être que dans le futur plus personne n'utilisera de système de "grid"...qui sait.....



Je pense que tu n'as pas compris ma demande initial ..
je demande juste confirmation ( oui c'est possible ou non pars-que ... )

Ah ben je confirme ... encore une fois ta question manque de clarté dans sa rédaction... (comme ta question précédente....). Normal que les gens ne répondent pas exactement comme tu le souhaites... n'étant pas dans ta tête..il nous est difficile de deviner tes désidératas....
A l'avenir fais donc des efforts dans la rédaction de tes questions en expliquant le plus clairement possible ce que tu souhaites faire/obtenir. Ca nous évitera à tous (toi y compris) de se prendre des réflexions à la c**

Bonne continuation.
0
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
8 juin 2016 à 11:56
Si la question est résolue... merci de mettre la discussion... en RESOLUE.
merci.
0
leito666 Messages postés 74 Date d'inscription mercredi 18 avril 2012 Statut Membre Dernière intervention 15 octobre 2017
Modifié par leito666 le 8/06/2016 à 12:34
Peut-être que dans le futur plus personne n'utilisera de système de "grid"...qui sait.....
je pensais " table " enterrer

encore une fois ta question manque de clarté dans sa rédaction... (comme ta question précédente....). Normal que les gens ne répondent pas exactement comme tu le souhaites... n'étant pas dans ta tête..il nous est difficile de deviner tes désidératas....


< je demande juste confirmation ( oui c'est possible ou non pars-que ... )" >
....euu c'est quoi qui est pas clair dans ma rédaction de mes "déshydratas" ???

Si je te demande l'heur ..je connais sûrement la date et pourtant je n'en fait pas allusion ..donc il n'est pas nécessaire de me dire l'année en plus


< il s'agit bien de "différents choix" ( customisation ) ou de tailles précise ayant une fonction ? >

donc la réponse :
Pour chaque "taille" d'écran
@media only screen and (min-width: 600px) {

a aucun intérêt . tu m'entionne @media...... et moi je parle de .col-1


Les tailles ( certes sont précises ) mais n'ont aucune fonction
( pour .col-1 .col-2 ....etc )
..même si éventuellement utile pour ce que je pensai ( la customisation )

Problème RÉSOLU
Merci de prendre le soin de comprendre la question avant de répondre . Moi je fait bien en sorte de donner un max de détail .


Bonne année >_<
0
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649 > leito666 Messages postés 74 Date d'inscription mercredi 18 avril 2012 Statut Membre Dernière intervention 15 octobre 2017
Modifié par jordane45 le 8/06/2016 à 13:09
< je demande juste confirmation ( oui c'est possible ou non pars-que ... )" >
....euu c'est quoi qui est pas clair dans ma rédaction de mes "déshydratas" ???

Les réponses tu les as eu.... et en plus.. on fait l'effort de te les argumenter...
Qu'est-ce que tu ne comprends pas au juste ?
Tu voulais un oui ou un nom ... tu l'as eu...
Tu peux. oui.

et si le reste de la réponse ne t’intéresse pas... tu peux ne pas la lire... ça te regarde...





Merci de prendre le soin de comprendre la question avant de répondre . Moi je fait bien en sorte de donner un max de détail .

Tu te moques de qui (pour rester poli....) ???
Tu poses une question en balançant du code
et ta question se résume en deux lignes :

mais j'ai un doute ..il s'agit bien de "différents choix" ( customisation ) ou de tailles précise ayant une fonction ?

Ça pour du détail...c'est du détail.... à quoi fais tu références lorsque tu parles des "différents choix" ?? des "tailles" .?????
Et lorsqu'on essaye de comprendre la question justement... (en te demandant des compléments d'info...) tu nous envoies bouler.....
Commence par rebrancher ton cerveau et de te demander si le souci ne vient pas de toi avant de tirer sur l'ambulance.....


@media only screen and (min-width: 600px) {

width étant une largeur ... et 600px une taille... le fait que je t'en ai parlé répond donc à ta question....
A un moment..as tu précisé que tu ne souhaitais avoir des informations "que" sur les "col" ??? ... NON !
Bref...
En plus d'être arrogants... tu es de mauvaise foi...

Tu as posé QUATRE questions ... et pour 100% d'entre elles des problèmes de compréhension se sont posés ... (par plusieurs personnes et pas que moi) !

bonne année ?? ... et bien oui avec plaisir.... si tu peux éviter de repasser ici avant 2017 ça m'ira très bien.
Chao !

\o/

0
leito666 Messages postés 74 Date d'inscription mercredi 18 avril 2012 Statut Membre Dernière intervention 15 octobre 2017
Modifié par leito666 le 8/06/2016 à 15:13
Les réponses tu les as eu.... et en plus.. on fait l'effort de te les argumenter...
Qu'est-ce que tu ne comprends pas au juste ?
Tu voulais un oui ou un nom ... tu l'as eu...


QUI A DIT LE CONTRAIRE MOI PAS BESOIN DE M'EXPLIQUER LONGTEMPS POUR QUE JE COMPREND VITE OK ?!


et si le reste de la réponse ne t’intéresse pas... tu peux ne pas la lire... ça te regarde...
J'AI UNIQUEMENT PARLÉ DES ".COL" ET RIEN D'AUTRE ..DONC J’INSISTE MERCI DE PRENDRE LE TEMPS DE COMPRENDRE AVANT DE RÉPONDRE


Tu te moques de qui (pour rester poli....) ???
Tu poses une question en balançant du code
et ta question se résume en deux lignes :

2 LIGNES SIMPLE A COMPRENDRE + UNE CORRECTION DE SCRIPT POUR ILLUSTRER MA DEMANDE ...MAIS FAUT-IL ENCORE PRENDRE LA PEINE DE VRAIMENT VOULOIR PARTICIPER POUR FAIRE AVANCER LE FORUM .. !
DE PLUS JE ME MOQUE DE PERSONNE CONTRAIREMENT À CERTAIN ! MAIS ÇA N'AS RIEN DE DÉFINITIF . MOI AUSSI J'PEUT ÊTRE POLI SI TU VEUT !!!



Ça pour du détail...c'est du détail.... à quoi fais tu références lorsque tu parles des "différents choix" ?? des "tailles" .?????
Et lorsqu'on essaye de comprendre la question justement... (en te demandant des compléments d'info...) tu nous envoies bouler.....
Commence par rebrancher ton cerveau et de te demander si le souci ne vient pas de toi avant de tirer sur l'ambulance.....

PARLE PAS DE CE QUE TU CONNAIS PAS ! J'AI ÉTAIT AMBULANCIER !
POUR LES DÉTAILS SITU N'AVAIS PAS AUTRE CHOSE QUE DE LA M...MATIÈRE DANS LES YEUX TU AURAIS VUE QUE :
.col-1 {............
.col-2 {............
.col-4 {............
.....etc

NE FIGURE PAS DANS LA CORRECTION DU SCRIPT !
ptit rappel avec correction mais pas grace à toi :)
<div class="s-25 s-100">A.S.M (63) ! </div>

@media only screen and (min-width: 768px),
@media only screen and (min-width: 600px) {
.s-25 {width: 25%;}
.s-100 {width: 100%;}
}

@media only screen and (min-width: 768px) {
background: yellow;
}

@media only screen and (min-width: 600px) {
background: blue;
}



width étant une largeur ... et 600px une taille... le fait que je t'en ai parlé répond donc à ta question....
DONC UNE TAILLE NE PEUT PAS ETRE UNE LARGEUR... ( vite qu'on lui donne une corde ou des arguments valable ! )
ENTRE
 @MEDIA
ET
.COL-1
.COL-2
.COL-4
.COL-5.......etc

Y AJUSTE UNE PETITE DIFFÉRENCE !
SI TU ENLÈVE LA MATIÈRE DE TES YEUX ET QUE TU REGARD ..TU VERRA QUE @MEDIA N'AS PAS ÉTAIT CHANGÉ/MODIFIÉ SUR MA CORRECTION EST N'EST DONC PAS EN CAUSE !

A un moment..as tu précisé que tu ne souhaitais avoir des informations "que" sur les "col" ??? ... NON !
Bref...

...TOUCHÉ PAR LA GRÂCE...


Tu as posé QUATRE questions ... et pour 100% d'entre elles des problèmes de compréhension se sont posés ... (par plusieurs personnes et pas que moi) !
FAUT !!!
___1 __J'AI PARTICIPÉ A BEAUCOUP PLUS DE SUJETS !
___2 __JE SUIS SUR DE NOMBREUX FORUM !
___3 __SUR TOUS LES SUJETS OU J'AI POSTÉ DES SOLUTIONS PERSONNE SE PLAINT ..AU CONTRAIRE !
___4 __J'Y SUIS POUR RIEN SI LES 3/4 DES GENS NE COMPREND RIEN !
( mais ca fait bien rire les gens qui m'entour ...merci pour eux ,c'est déjà ca )

En plus d'être arrogants... tu es de mauvaise foi...

bonne année ?? ... et bien oui avec plaisir.... si tu peux éviter de repasser ici avant 2017 ça m'ira très bien.
Chao !

va jouer JORDY ..On sait ta 4 ans et t'es petit !
mais tu fait rire personne !


( si quelqu'un pouvait fermer ce sujet avant que je l’insulte ! Merci )
0