Reconnaître les petits écrans

**paul6023** · 19/04/2020, 23h10

bonsoir,
j'ai un site je voudrai qu'il s'adapte aux petites écran; j'ai essayé deux méthodes mais sans résultat:
première méthode:

Code html :

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

1
2
<link rel="stylesheet" type="text/css" href="style.css" title="default"  media="screen" />
<link rel="stylesheet" type="text/css" href="stylemini.css" title="Mini" media="screen and (max-width: 500px)" />

css: sur stylemini.css

Code css :

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

1
2
3
4
#menu  {
    width:0px;
    display: none;
}

deuxième méthode:

Code html :

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

1
2
<meta name="viewport" content="width=device-width, user-scalable=yes" />
<link rel="stylesheet" type="text/css" href="style.css" title="default"  media="screen" />

css: sur style.css

Code :

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

1
2
3
4
5
6
@media screen and (max-width: 500px) {
    #menu  {
        width:0px;
        display: none;
    }
}

mais le menu est toujours visible, je sis pas ou est le problème
merci

**kevin254kl** · 20/04/2020, 04h43

Salut,

Je pense que la condition screen est toujours valide du coup tu peux mettre

Code :

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

"screen and (min-width: 501px)"

pour style css ou alors,
changer l'ordre des link à tester.

Invité · 20/04/2020, 09h46

Bonjour,

En bref :

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
<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes"> 
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <header>
        ...
    </header>
    <nav>
        ...
    </nav>
 
    <main>
    <section>
        ...
    </section>
    </main>
 
    <footer>
        ...
    </footer>
</body>
</html>

style.css :

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
/* styles CSS */
...
/* MOBILE FIRST */
...
/* TABLET */
@media screen and (min-width:575px) and (max-width:991px) {
...
}
/* DESKTOP */
@media screen and (min-width:992px) {
...
}

Reconnaître les petits écrans [CSS 3]

CSS

Vue hybride

Discussions similaires

Partager

Partager