HTML - CSS - Media Queries
Invité
-
codeurh24 Messages postés 760 Date d'inscription Statut Membre Dernière intervention -
codeurh24 Messages postés 760 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Je voudrais que mon site web utilise une feuille de style CSS différente de celle qu'il utilise « habituellement » lorsqu'on le consulte sur un périphérique mobile.
Pour cela j'ai utilisé la syntaxe ci-dessous dans le head de ma page HTML, mais cette syntaxe n'a pas l'air de marcher vu que rien ne se passe...
<link rel="stylesheet" media="(media handheld)" href="stylespecial.css" />
J'espère donc qu'un membre de la communauté CCM puisse me venir en aide ! :)
Merci d'avance pour vos réponses, et bonne journée !
PS : J'ai précédemment consulté les sites suivant :
https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/mise-en-page-adaptative-avec-les-media-queries
https://developer.mozilla.org/fr/docs/Web/CSS/Requ%C3%AAtes_m%C3%A9dia/Utiliser_les_Media_queries
Je voudrais que mon site web utilise une feuille de style CSS différente de celle qu'il utilise « habituellement » lorsqu'on le consulte sur un périphérique mobile.
Pour cela j'ai utilisé la syntaxe ci-dessous dans le head de ma page HTML, mais cette syntaxe n'a pas l'air de marcher vu que rien ne se passe...
<link rel="stylesheet" media="(media handheld)" href="stylespecial.css" />
J'espère donc qu'un membre de la communauté CCM puisse me venir en aide ! :)
Merci d'avance pour vos réponses, et bonne journée !
PS : J'ai précédemment consulté les sites suivant :
https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/mise-en-page-adaptative-avec-les-media-queries
https://developer.mozilla.org/fr/docs/Web/CSS/Requ%C3%AAtes_m%C3%A9dia/Utiliser_les_Media_queries
A voir également:
- HTML - CSS - Media Queries
- Windows media player - Télécharger - Lecture
- Media creation tool - Télécharger - Systèmes d'exploitation
- Editeur html - Télécharger - HTML
- Ps3 media server - Télécharger - Divers Réseau & Wi-Fi
- Vlc media player - Télécharger - Lecture
2 réponses
Bonsoir,
Il y a probablement d'autres solutions, mais personnellement, j'utilise du PHP :
Courage, le bout du tunnel n'est pas loin, il suffit de se retourner.
Il y a probablement d'autres solutions, mais personnellement, j'utilise du PHP :
<?php
// Chargement du fichier CSS s'il s'agit d'un user agent smartphones
$ua = $_SERVER['HTTP_USER_AGENT'];
if (preg_match('/iphone/i',$ua) || preg_match('/android/i',$ua) || preg_match('/blackberry/i',$ua) || preg_match('/symb/i',$ua) || preg_match('/ipad/i',$ua) || preg_match('/ipod/i',$ua) || preg_match('/phone/i',$ua) )
{
echo "<link rel='stylesheet' type='text/css' href='style-mobile.css'>";
}
else
{
echo "<link rel='stylesheet' type='text/css' href='style.css'>";
}
?>
Courage, le bout du tunnel n'est pas loin, il suffit de se retourner.
Bonsoir.
Un membre de CCM ne pourra pas te donner l’expérience qui te manque en CSS.
Le code que tu nous montres, n'indique rien qui peut fonctionner et l'attribut media ne te sert pas pour ce que tu souhaites faire.
Quand tu utilises les medias queries, il faut connaitre les résolutions d’écran des différents appareils ciblés.
Exemple sur un écran pc:
Une fois que tu te seras formé au CSS, le mieux est de se former sur bootstrap.
https://getbootstrap.com/getting-started/#download
Un membre de CCM ne pourra pas te donner l’expérience qui te manque en CSS.
Le code que tu nous montres, n'indique rien qui peut fonctionner et l'attribut media ne te sert pas pour ce que tu souhaites faire.
Quand tu utilises les medias queries, il faut connaitre les résolutions d’écran des différents appareils ciblés.
Exemple sur un écran pc:
@media screen and (min-width: 970px) and (max-width:1920px) {
.bloc {
display:block;
clear:both;
}
}
Une fois que tu te seras formé au CSS, le mieux est de se former sur bootstrap.
https://getbootstrap.com/getting-started/#download
