Gérer le responsive en CSS

**Tamzoro** · 07/07/2021, 09h11

Bonjour à toutes et à tous,

J'aimerai bien apprendre à gérer le responsive sur plusiers devices. Ma première question est de savoir combien il existe de format devices?

En faisant des recherches j'ai trouvé ceci:

320x568 -> Iphone 5
375x667 -> Iphone 6
1440x900 -> Laptop
1680x1050 -> Desktop
2560x1440 -> Desktop

Lorsque j'essaye d'adapter mon responsive pour l'Iphone 5 je n'y arrive pas du tout.

Par exemple, mon logo est sensé être à gauche, il est à droit.
Les langues doivent être à gauche et ils sont à droites.

Je ne comprends le soucis ??

HTML

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="header">
    <div class="wrapper">
      <div class="logo"></div>
      <div class="b-text">
        <div class="first-text">Chez Gaston Online</div>
        <div class="second-text">le service internet chez Gaston Associated Brokers SA</div>
     </div>
      <div class="languageSelect">
        <a href="#">FR | </a>
        <a href="#">EN | </a>
        <a href="#">ES | </a>
        <a href="#">NL | </a>
        <a href="#">DE | </a>
        <a href="#">PT </a>
      </div>
    </div>
 </div>
</body>
</html>

CSS

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
body {
    margin: 0;
    padding: 0;
  }
 
  a {
    text-decoration: none;
  }
 
  #header {
    height: 80px;
    background-color: #A60027;
    width: 100%;
  }
 
  #header .wrapper {
    margin: 0 auto;
    width: 80%;
    position: relative;
    padding-top: 20px;
  }
 
  #header .logo {
    display: block;
    float: left;
    position: relative;
    left: 175px;
    height: 140px;
    width: 228px;
    text-indent: -999em;
    overflow: hidden;
    background: url('https://zupimages.net/up/21/27/auzs.png') no-repeat;
  }
 
 
  #header .languageSelect {
    position: absolute;
    top: 18px;
    right: 150px;
    overflow: hidden;
  }
 
  #header .languageSelect a {
      display: block;
      float: left;
      text-transform: uppercase;
      color: #fff;
      text-decoration: none;
      font-family: 'lubalLight';
      padding: 0 10px;
      border-right: 1px solid #b14c5c;
      margin-right: -1px;
      font-size: 11px;
  }
 
  #header .languageSelect a:hover {
    background: #fff;
    color: #9d0c24;
 
  }
 
  #header .b-text {
    margin: 0 auto;
    width: 50%;
    padding-left: 280px;
    color: white;
 
  }
  #header .first-text {
    font-size: 30px;
 
  }
 
  #header .second-text {
      font-size: 21px;
  }
 
  @media screen and (max-width: 375px) {
 
    #header {
        height: 80px;
        background-color: #A60027;
        width: 100%;
    }
 
    #header .wrapper {
        margin: 0 auto;
        width: 80%;
        position: relative;
        padding-top: 20px;
      }
 
 
    #header .logo {
        position: absolute;
        float: left;
        left: -15px;
    }
 
    #header .languageSelect {
        right: 0;
        float: right;
        overflow: hidden;
      }
 
  }

Merci pour votre aide.

**NoSmoking** · 07/07/2021, 09h54

Bonjour,
il te faut gérer cela via les requêtes media queries.

Pour un aperçu de ce qui existe :

**Doksuri** · 07/07/2021, 10h53

Envoyé par Tamzoro

combien il existe de format devices?

=> autant que tu l'as decide...

pour completer NoSmoking, il faut penser ton responsive en "mobile first" (prevoir le display pour le plus petit device que tu souhaites, puis appliquer les modifs pour les devices plus grands
je pense que gerer 4 ou 5 sizes, c'est suffisant

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/* style de base prevu pour mobile */
        body {
            color: #fff;
            background-color: #333;
        }
/*ajustements pour les tailles plus grandes*/
@media (min-width: 400px){
            body { background-color: #666; }
        }
        @media (min-width: 500px){
            body { background-color: #999; }
        }
        @media (min-width: 700px){
            body {
                color: #000;
                background-color: #ccc;
            }
        }
        @media (min-width: 1000px){
            body { background-color: #fff; }
        }