Récupérer la largeur de l'écran du visiteur en CSS

**zool.bzh** · 20/05/2024, 12h16

bonjour
Voici en gros je que je souhaite

Code css :

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

1
2
3
4
5
@media only screen and (max-width: 500px) {
 
    <meta name="viewport" content="width=???, initial-scale=1" />
 
}

Ceci pour la résolution des mobiles

**NoSmoking** · 21/05/2024, 18h12

Bonjour,

tu sors ce code d'où, du HTML dans du CSS ?!?!?!?!

Ceci pour la résolution des mobiles

tu n'est pas sorti des ronces, il existe la balise <meta> suivante :

Code html :

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

<meta name="viewport" content="width=device-width, initial-scale=1.0">

qui devrait régler la plupart de tes soucis sur mobile.

Ressource :

Utilisation de la balise meta viewport pour contrôler la mise en page sur mobile

**zool.bzh** · 31/05/2024, 07h47

device-width

Obsolète: Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.

je cherche encore peut-etre avec @media screen

**NoSmoking** · 31/05/2024, 10h24

Envoyé par zool.bzh

device-width

Obsolète:

Non, je ne parle pas de ce device-width là, mais de cette utilisation : Un viewport de base.

Voir aussi : meta name="viewport".

**zool.bzh** · 16/08/2024, 18h00

bonjour

J'ai opté pour ceci -> oOo

Merci a tous

Pour mes prochains sites j'opterais pour du flex responsive css, je pense que se sera mieux

**NoSmoking** · 19/08/2024, 10h26

Envoyé par zool.bzh

J'ai opté pour ceci -> ...

... pourquoi faire simple

**zool.bzh** · 22/08/2024, 19h07

je serais curieux de savoir comment tu ferais l'affaire NoSmoking ...

**NoSmoking** · 25/08/2024, 17h15

Tout d'abord je ne me soucis pas de la largeur/hauteur du périphérique de sortie.

Il ne faut pas utiliser de conteneur « contraignant » comme les <table> par exemple, hors cas spécifique bien sûr, le principe étant de laisser les éléments dans le flux et s'adapter à la fenêtre.
On banni pour le dimensionnement les unités absolues.

Les constructions doivent être et simples et non alambiquées.
Il ne sert à rien d'ajouter des éléments qui ne servent à rien justement.
Il est préférable de travailler sur du code HTML conforme, on peut mettre un <p> dans une <div> mais pas une <div> dans un <p>.

Un bon test est de n'appliquer aucun style à la page et de redimensionner la fenêtre du navigateur pour voir si l'affichage reste cohérent dans celle-ci.
Exit donc les positionnement flottant si possible.

On évitera également des largeurs/hauteurs fixes, l'utilisation de max-width et/ou max-height donnant des résultats plus probant.
Les images pourraient être déclarées comme :

Code css :

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

1
2
3
4
5
img {
  max-width: 100%;
  height: auto;
  display: block;
}

Ne pas oublier de mettre la balise

Code html :

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

<meta name="viewport" content="width=device-width, initial-scale=1.0">

comme déjà mentionné dans d'autres discussions.

En suivant ces quelques directives il se pourrait même que tu n'ais pas besoin d'utiliser les média queries.

Ce que pourrait- être ta page accueil :

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
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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reprise accueil Le 9eme Cercle </title>
<meta name="description" content="">
<style>
html, body {
  margin: 0;
  padding: 0;
  font: 1em/1.5 Verdana,sans-serif;
}ul {
  display: inline-block;
  margin: 0;
  padding: 0;
  line-height: 1.5;
  list-style: none;
}
li {
  display: flex;
  justify-content: space-around;
  gap: .5em;
}
ul span:last-child {
  margin-left: auto;
}
a {
  text-decoration: none;
}
.wrapper {
  display: grid;
  position: relative;
  grid-template-columns: 10em 1fr;
  grid-template-areas:
    "header header"
    "aside main"
    "footer footer";
  gap: .5em;
  margin: 1em auto;
  max-width: 60em;
}
.entete {
  grid-area: header;
}
.entete img {
  display: block;
  height: auto;
  max-width: 100%;
}
.aside {
  display: flex;
  flex-direction: column;
  gap: 1em;
  text-align: center;
}
.aside h2 {
  margin: .25em;
  font-size: 1em;
}
.aside a {
  display: block;
}
.menu {
  border: 1px solid #008;
  text-align: center;
  background-color: #DEF;
  grid-area: menu;
}
.liens {
  border: 1px solid #800;
  background-color: #FDE;
  grid-area: liens;
}
.visitor {
  margin-top: auto;
  border: 1px solid #080;
  background-color: #EFD;
  grid-area: visitor;
}
.main {
  padding: .5em;
  border: 1px solid #888;
  background-color: #EEE8;
  grid-area: main;
}
.main-content {
  margin: auto;
  max-width: 60%;
  min-width: 18em;
  text-align: justify;
}
.main-content .chargement {
  text-align: center;
}
.main-content h1 {
  color: #C00;
}
.main-content .navigator {
  padding: 0 .5em;
  border: 1px solid #800;
  font-size: .9em;
  background-color: #F808;
}
.main-content .navigator * {
  text-decoration: line-through;
}
.footer {
  border: 1px solid #880;
  text-align: center;
  background-color: #FFD;
  grid-area: footer;
}
/*///////////////////////////////*/
@media(max-width:576px) {
  .wrapper {
    /*-- si GRID
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "aside"
      "main"
      "footer";
    /*--*/  
    /*-- ou FLEX --*/  
    display: flex;
    flex-direction: column;
  }
  .liens ul,
  .menu ul {
    display: flex;
    justify-content: space-around;
  }
  .navigator,
  .visitor {
    display: none;
  }
  .main-content {
    min-width: 90%;
  }
}
</style>
</head>
<body>
<div class="wrapper">
  <header class="entete">
    <img src="https://le9emecercle.net/pics/header.jpg" alt="">
  </header>
 
  <aside class="aside">
    <div class="menu">
      <h2>Menu</h2>
      <ul>
        <li><a href="news.php">News</a></li>
        <li><a href="soon.php">Soir&eacute;es</a></li>
        <li><a href="../soundz">Soundz</a></li>
        <li><a href="videos.php">Vid&eacute;os</a></li>
        <li><a href="photos.php">Photos</a></li>
        <li><a href="guestbook.php">GuestBook</a></li>
        <li><a href="contakt.php">Contakt</a></li>
      </ul>
    </div>
 
    <div class="liens">
      <h2>Liens</h2>
      <ul>
        <li><a href="out.php?id=1" target="_blank">FBI</a></li>
        <li><a href="out.php?id=2" target="_blank">DB-Party</a></li>
        <li><a href="out.php?id=15" target="_blank">Asmat</a></li>
      </ul>
    </div>
 
    <div class="visitor">
      <ul>
        <li><span>visiteurs :</span><span>6789</span></li>
        <li><span>aujourd'hui : </span><span>345</span></li>
        <li><span>connecté : </span><span>12</span></li>
      </ul>
    </div>
  </aside>
 
  <main class="main">
    <div class="main-content">
      <h1>.: Accueil :.</h1>
      <div class="accueil">
        <p>
          Le 9ème Cercle est une association originaire du centre Bretagne regroupant plusieurs artistes issus de la culture électronique.</p>
        <p>
          Composée de DJ's et VJ's, elle a pour but de développer les musiques actuelles, ses émergences et la rencontre des différentes formes d'expressions artistiques par le biais d'evènements divers.<br>
          Le 9ème Cercle c'est Pusher, nOkrOme, sP6mN, Loxx, zoolBzH, Pedro, MadTom, VinZ, Gwen, Nico, Stouf, Tao etc...
        </p>
      </div>
 
      <div class="navigator">
        <p>Afin que ce site soit exploré de façon optimale, je vous conseille vivement d'installer le meilleur navigateur web qui existe, ça nouvelle version est téléchargeable ci-dessous :</p>
        <div class="chargement">
          <p>Firefox 118.0 fr</p>
          <ul>
            <li>
              <a href="https://download-installer.cdn.mozilla.net/pub/firefox/releases/118.0/win32/fr/Firefox%20Setup%20118.0.exe" target="blank">Windows 32 bits</a>
              <span class="twos gris6txt">55,1 Mo</span>
            </li>
            <li>
              <a href="https://download-installer.cdn.mozilla.net/pub/firefox/releases/118.0/win64/fr/Firefox%20Setup%20118.0.exe" target="blank">Windows 64 bits</a>
              <span class="twos gris6txt">55,1 Mo</span>
            </li>
            <li>
              <a href="https://download-installer.cdn.mozilla.net/pub/firefox/releases/118.0/mac/fr/Firefox%20118.0.pkg" target="blank">Mac</a>
              <span class="twos gris6txt">133 Mo</span>
            </li>
            <li>
              <a href="https://download-installer.cdn.mozilla.net/pub/firefox/releases/118.0/linux-i686/fr/firefox-118.0.tar.bz2" target="blank">Linux 32 bits</a>
              <span class="twos gris6txt">78,5 Mo</span>
            </li>
            <li>
              <a href="https://download-installer.cdn.mozilla.net/pub/firefox/releases/118.0/linux-x86_64/fr/firefox-118.0.tar.bz2" target="blank">Linux 64 bits</a>
              <span class="twos gris6txt">76,7 Mo</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </main>
 
  <footer class="footer">
    <p>website by zool -></p>
  </footer>
</div>
</body>
</html>

Voilou

Récupérer la largeur de l'écran du visiteur en CSS

Dimensionnement en CSS

Discussions similaires

Partager

Partager