Salut @ tous !
Je mets en place sur mon site le Bootstrap Responsive de Twitter.
Le redimensionnement fonctionne bien sauf pour les règles @media (max-width: 480px) et @media (min-width: 980px) pour laquelle rien ne change.
Pour tester j'ajoute ce code dans une feuille de style perso (style.css) liée à la page :
@media (max-width: 480px) /* NE FONCTIONNE PAS */
{
div#test { background-color: red; }
}
@media (min-width: 481px) and (max-width: 979px)
{
div#test { background-color: cyan; }
}
@media (min-width: 980px) /* NE FONCTIONNE PAS */
{
div#test { background-color: green; }
}
Merci de m'aider à comprendre mon erreur...
1 réponse
Voici mon code (j'utilise CodeIgniter) :<code type="html"><!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>
<?php echo $titre_page; ?>
</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="<?php echo $valeur_option_description_site; ?>">
<meta name="author" content="<?php echo $valeur_option_nom_site; ?>">
<meta name="keywords" content="<?php echo $valeur_option_keywords_site; ?>">
<meta name="geo.placename" content="Saint Amand les eaux, Nord, France">
<!-- <meta name="google-site-verification" content="" /> -->
<link href="<?php echo base_url(); ?>bootstrap_2_0_4/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body { padding-top: 60px; padding-bottom: 40px; }
.sidebar-nav { padding: 9px 0; }
</style>
<link href="<?php echo base_url(); ?>bootstrap_2_0_4/css/bootstrap-responsive.css" rel="stylesheet">
<link href="<?php echo base_url(); ?>css/defaut/style.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="shortcut icon" href="<?php echo base_url(); ?>ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="<?php echo base_url(); ?>ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="<?php echo base_url(); ?>ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="<?php echo base_url(); ?>ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="<?php echo base_url(); ?>ico/apple-touch-icon-57-precomposed.png">
</head>
<body>
<div class="container">
<div id="test">
aaaaaaaa
<br />
bbbbbbbb
</div>
</div>
<script src="<?php echo base_url(); ?>jq/jquery_1_7_2/jquery.min.js"></script>
<script src="<?php echo base_url(); ?>bootstrap_2_0_4/assets/js/bootstrap-transition.js"></script>
<script src="<?php echo base_url(); ?>bootstrap_2_0_4/assets/js/bootstrap-alert.js"></script>
<script src="<?php echo base_url(); ?>bootstrap_2_0_4/assets/js/bootstrap-modal.js"></script>
<script src="<?php echo base_url(); ?>bootstrap_2_0_4/assets/js/bootstrap-dropdown.js"></script>
<script src="<?php echo base_url(); ?>bootstrap_2_0_4/assets/js/bootstrap-scrollspy.js"></script>
<script src="<?php echo base_url(); ?>bootstrap_2_0_4/assets/js/bootstrap-tab.js"></script>
<script src="<?php echo base_url(); ?>bootstrap_2_0_4/assets/js/bootstrap-tooltip.js"></script>
<script src="<?php echo base_url(); ?>bootstrap_2_0_4/assets/js/bootstrap-popover.js"></script>
<script src="<?php echo base_url(); ?>bootstrap_2_0_4/assets/js/bootstrap-button.js"></script>
<script src="<?php echo base_url(); ?>bootstrap_2_0_4/assets/js/bootstrap-collapse.js"></script>
<script src="<?php echo base_url(); ?>bootstrap_2_0_4/assets/js/bootstrap-carousel.js"></script>
<script src="<?php echo base_url(); ?>bootstrap_2_0_4/assets/js/bootstrap-typeahead.js"></script>
</body>
</html></code>
Et voici mon css (je l'ai modifié, mais la règle @media (max-width: 480px) ne marche toutjours pas, la DIV ne prend pas la couleur #4335b0 ) :
<code type="css">/* ************* */
/* MEDIA QUERIES */
/* ************* */
@media (max-width: 979px)
{
div#principal{ background-color: blue; !important; }
}
@media (min-width: 1200px)
{
div#principal{ background-color: red; !important; }
}
@media (max-width: 480px)
{
div#principal{ background-color: #4335b0 !important; }
}
@media (min-width: 481px) and (max-width: 767px)
{
div#principal{ background-color: #e7a198 !important; }
}
@media (min-width: 768px) and (max-width: 979px)
{
div#principal{ background-color: yellow !important; }
}
@media (min-width: 980px) and (max-width: 1199px)
{
div#principal{ background-color: green !important; }
}</code>
<citation>@media (max-width: 480px)
{
div#principal{ background-color: #4335b0 !important; }
}</citation>