Gérer le responsive en CSS
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:
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:
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.
