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.