1485 sujets

Web Mobile et responsive web design

Novice en RWD

coucou tout le monde.

Je suis novice en responsive Web Design. Je suis en formation à distance mais nous sommes samedi et persone ne peut m'aider.

Il s'agit d'un petit exercice.

Voila je cherche comment mettre en place plusieurs mise en page différentes selon la résolution.

pour les résolution inferieur a 480px on voit apparaître "OLE"

pour les résolutions comprise entre 480 et 768 px on voit apparaitre "HELL"

et pour les résolutions supérieur à 768px "HELLO" apparait.



voici le code HTML :

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Responsive</title>
        <link href="style.css" rel="stylesheet" />
    </head>


    <body>

        <div id="h">H</div>
        <div id="e">E</div>
        <div id="l1">L</div>
        <div id="l2">L</div>
        <div id="o">O</div>

    </body>

</html>



Voici le code CSS :

div{
    float: left;
    width: 20%;
    font-size: 10em;
    text-align: center;
    line-height: 1em;
}

*{
    margin: 0;
}



#h{
    background:green;
    /*float:left;
    width: 10rem;
    text-align: center;
    font-size: 10em;*/
    
    }
    
#e{
    background:red;
    /*float:left;
    width: 10rem;
    text-align: center;
    font-size: 10em;*/
    }
    
#l1{
    background:yellow;
    /*float:left;
    width: 10rem;
    text-align: center;
    font-size: 10em;*/
    }
    
#l2{
    background:green;
    /*float:left;
    width: 10rem;
    text-align: center;
    font-size: 10em;*/
    }
    
#o{
    background:red;
    /*float:left;
    width: 10rem;
    text-align: center;
    font-size: 10em;*/
    }

/*======Format smatphone modernes et iPads======*/
@media screen and (max-width: 768px){

    div{width: 100%;}
    #o{display: none;}
    #h{position: absolute;
        top: 10rem;}
    #e{position: absolute;
        top: 20rem;}
    #l1{position: absolute;
        top: 30rem;}
    #l2{position: absolute;
        top: 40rem;}

}


/*======Format smatphones premières generations======*/
@media screen and (max-width: 480px){

    div {width: 100%;}
    #h, #l2{display: none;}
    #o{position: absolute;
        top: 10rem;}
    #l1{position: absolute;
        top: 20rem;}
    #e{position: absolute;
        top: 30rem;}
}
connecté
Bonjour,

Pour un html de départ de ce style (par exemple) :
<p class="test">Test&nbsp;:</p>


On pourra faire ceci (une solution parmi d'autres) :
 .test::after {
	text-transform: uppercase; /* On style un peu le résultat... */
	font-weight: 900;
}

.test::after {
	content: ' Olé';
}
  
@media (min-width: 480px) {

	.test::after {
		content: ' Hell';
	}

} /* END @media */

@media (min-width: 768px) {

	.test::after {
		content: ' Hello';
	}

} /* END @media */


Exemple en ligne
Modifié par Olivier C (26 Jul 2015 - 06:37)
En fait je souhaite comprendre simplement pourquoi dans mon exemple je ne vois pas le "O" de OLE. Smiley confused .
Je ne comprend pas mon erreur !!
connecté
D'accord. En fait c'est simple : c'est parce que vous avez codé vos règles en priorisant les écrans larges en premier, vous êtes ensuite obligé de contrer ces même règles pour les devices plus petits. C'est une erreur que beaucoup de personnes font. En effet, il y a plus de code pour les deskpots que pour les mobiles, il est donc plus simple et moins couteux d'ajouter des règles du plus petit écran au plus grand (ce que l'on appelle communément le mobile first) plutôt que l'inverse.

Exemple dans votre cas : pour contrer la règle initiale float: left posée sur les divs, il vous faut par la suite mettre tout un tat de position: absolute et de top: XXrem alors que tout cela aurait été inutiles dans le cas d'une approche mobile first.

Voici cependant votre code corrigé : codepen 1. Il fallait donc rétablir un display: block là où un display: none avait été apposé auparavant, pas très clean...

Il vaudrait mieux utiliser l'approche mobile first, couplée avec des display: table (avec un caption-side: top pour le "O"), ou mieux encore (mais moins compatible) : des flexbox (avec un order: -1 pour le "O"). Je vous laisse aller voir cet article : css3 flexbox layout module.
Modifié par Olivier C (28 Jul 2015 - 15:01)
Sujet clos
Aller à