1485 sujets

Web Mobile et responsive web design

Pourquoi mon liens CSS pour mobile n'est pas pris en compte ?

Bonjour,

Je suis en train de me mettre à la création d'une version mobile d'un site web.

Voilà mon code :


<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, maximum-scale=1" />
<title>Titre</title>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style_mobile.css" media="handheld, only screen and (max-device-width:480px)" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>
<body>


Quand je laisse comme ça, l'affichage est identique sur PC ou sur mobile.

Quand je force le lien CSS :


<link rel="stylesheet" type="text/css" href="style_mobile.css" media="screen" />


Sans mettre le :


<link rel="stylesheet" type="text/css" href="style.css" media="screen" />


Là évidemment le site s'affiche correctement.

Ma question est pourquoi le lien CSS pour mobile n'est pas pris en compte quand je met les deux ?

Merci d'avance à vous
Modifié par Surfsp33 (05 Mar 2012 - 07:14)
J'ai trouvé une piste :


<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="style_mobile.css" media="handheld, only screen and (max-device-width:480px)" />


En les mettant dans cet ordre là (mobile en dernier) il y a du mieux.

Dans le fichier : style.css j'ai ajouté ceci : 


@media (min-device-width: 641px) {
/* code css */
}


Dans le fichier : style_mobile.css j'ai ajouté ceci : 


@media (max-device-width: 640px) {
/* code css */
}


Et tout à l'air de fonctionner mais est-ce que quelqu'un peux m'expliquer ci c'est normal de rajouter ce code surtout dans le fichier qui ne concerne pas les mobiles ?

Merci d'avance

[édit : en faisant comme ça, internet explorer ignore totalement le css Smiley bawling ]
Modifié par Surfsp33 (05 Mar 2012 - 08:15)
Bonjour,

premièrement concernant l'ordre d'appel des fichiers, il faut savoir que le "C" dans "CSS" signifie "cascading" aka cascade.. Ce qui veut dire que les derniers arrivés sont prioritaires, puisque les styles se "superposent".
Dans ton cas, ton premier message indiquait à un mobile d'appliquer les styles normaux après les styles mobiles, ce qui devait en écraser la plupart.

Ensuite tes règles @media relèvent du paradoxe : ta feuille de styles pour mobiles vise les écrans de moins de 480px de large, et dans ton fichier style tu définis une largeur minimale de 641px de large : et pour les écrans entre 480px et 640px, il se passe quoi..? Je pense qu'il y a un petit manque de compréhension du mécanisme des media queries, là.

Je te suggère de lire cet article afin de te familiariser un peu plus avec les media queries, ainsi que le livre de Raphaël Goetter sur les css avancées.

Bon courage pour la suite !!
Merci pour cette réponse.

Effectivement mes valeurs ne sont pas correctes pour les @media.

J'ai bien lu l'article.

Si je fais : 


<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="style_mobile.css" media="handheld, only screen and (max-device-width:480px)" />


Le fichier mobile prend le dessus sur le fichier normal ?

Mais en y plaçant un 
@media (max-device-width: 480px) { /* CODE CSS */ }
il ne devrait pas être appliqué sur un écran d'ordinateur de résolution normale ?

Merci d'avance
Le problème est que tu utilises les queries dans le code html et dans les css. Normalement c'est l'un ou l'autre : soit on fait plusieurs feuilles de styles (.css) qu'on appelle avec plusieurs <link>, soit on fait crée une css unique avec plusieurs @media à l’intérieur (cas de mon site). Smiley smile

Tu devrais relire convenablement l'article de Raphaël. Smiley cligne
Modifié par Patidou (05 Mar 2012 - 10:07)
Sujet clos
Aller à