élément "facultatif" dans demo responsive ? [Résolu/Fermé]

Signaler
Messages postés
74
Date d'inscription
mercredi 18 avril 2012
Statut
Membre
Dernière intervention
15 octobre 2017
-
Messages postés
74
Date d'inscription
mercredi 18 avril 2012
Statut
Membre
Dernière intervention
15 octobre 2017
-
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 ?



2 réponses

Messages postés
33003
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 juin 2021
3 570
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. )
Messages postés
74
Date d'inscription
mercredi 18 avril 2012
Statut
Membre
Dernière intervention
15 octobre 2017

col-33 hein...? où ça ??

....vui col-6 ..je l'avais dit par contre je trouve aussi inutile d'avoir ajouté "m-"

il aurrai était encore plus simple de faire

<div class="s-25 s-75">A.S.M (63)</div>


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

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

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

..non ?
Messages postés
33003
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 juin 2021
3 570 >
Messages postés
74
Date d'inscription
mercredi 18 avril 2012
Statut
Membre
Dernière intervention
15 octobre 2017


col-33 hein...? où ça ??

col-3 .. pardon... mais bon vu que j'ai mis le code au dessus ... tu aurais pu voir que c'était une erreur de frappe....


il aurrai était encore plus simple de faire
<div class="s-25 s-75">

D'où tu me sors tes s- ?
Tu veux dire... si toi tu créés ces classes là ?
Ben si tu veux ...

Mais bon... l'exemple donné s'appuie sur des framework css comme bootstrap par exemple qui "découpent" les pages en "colonnes" (grid) .. d'où l'intitulé : col-
https://www.w3schools.com/css/css_rwd_grid.asp
Messages postés
74
Date d'inscription
mercredi 18 avril 2012
Statut
Membre
Dernière intervention
15 octobre 2017

..dans doute préfère me renseigner 33 ça faisait beaucoup ..

__<< D'où tu me sors tes s- ? >>

:D
oui j'pense que c'est plus facile ( s = scal ou size au choix) ..syntaxe plus courte

au final on peut remplacer

@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%;}
}

par

@media only screen and (min-width: 600px) {
.col-m-3 {width: 25%;}
.col-m-9 {width: 75%;}
.col-m-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
.col-3 {width: 25%;}
.col-6 {width: 50%;}
}


pour la demo
Messages postés
33003
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 juin 2021
3 570 >
Messages postés
74
Date d'inscription
mercredi 18 avril 2012
Statut
Membre
Dernière intervention
15 octobre 2017

Encore une fois ...As tu lu le lien que je t'ai donné ?

Tu peux. oui...... mais (y'a toujours un mais..) .... pourquoi faire ???
Qui peut le plus peut le moins.... pourquoi retirer des class qui pourraient te servir plus tard ??

Bien sûr dans ce cas précis .. où il s'agit d'une démo .. et si on part du principe que JAMAIS ils ne rajouterons de pages/code utilisant toutes ces class .... il est clair que tu pourrais ne prendre "que" celles qui sont utilisées.
Mais ça reste un exemple .... rien ne les empêche demain de vouloir ajouter/modifier une div pour y utiliser d'autres class.....

Bref.. le principe c'est : Je découpe ma page en X colonnes (en général 12 .. perso je bosse en 48 ). Donc je créé les X class nécéssaires (fois x médias : Smartphone / Tablette / small Screen / Large Screen ) comme ça .. quand je code .. je sais qu'elles existent et je n'ai pas à aller voir dans mon css à chaque fois pour me dire... "ah ben tiens.. faut que j'en créé une nouvelle car je ne l'avais encore jamais utilisé... ou peut être que si.. je ne sais plus.....'"

Suis-je assez clair cette fois ?

Bonne nuit.
Messages postés
74
Date d'inscription
mercredi 18 avril 2012
Statut
Membre
Dernière intervention
15 octobre 2017

et moi ???
oui bien sur que j'ai regardé le lien mais je n'utilise pas de " grid " ..
( je trouve ça pas du tout intéressant / adapté )

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

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 ) donc je pense avoir était " assez clair " ?

Merci pour les réponses rapide
Bonne journée
Messages postés
33003
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 juin 2021
3 570

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.
Messages postés
33003
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 juin 2021
3 570
Si la question est résolue... merci de mettre la discussion... en RESOLUE.
merci.
Messages postés
74
Date d'inscription
mercredi 18 avril 2012
Statut
Membre
Dernière intervention
15 octobre 2017

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 >_<
Messages postés
33003
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 juin 2021
3 570 >
Messages postés
74
Date d'inscription
mercredi 18 avril 2012
Statut
Membre
Dernière intervention
15 octobre 2017

< 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/

Messages postés
74
Date d'inscription
mercredi 18 avril 2012
Statut
Membre
Dernière intervention
15 octobre 2017

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 )