Bonjour!
Je suis à la création d'un nouveau site et je compte le faire responsive... J'utilise donc les media queries.
Donc voilà, j'ai vais à coup de @media screen and (bla bla), ça fonctionne sur mon écran de PC, mais quand je teste sur mobile et tablette, on dirait que ce n'est pas pris en compte. Il doit y avoir un truc que je n'ais pas compris...
page
code css main:
css menu:
les 2 feuilles de style seront mis ensemble en fin de prod.
Je suis à la création d'un nouveau site et je compte le faire responsive... J'utilise donc les media queries.
Donc voilà, j'ai vais à coup de @media screen and (bla bla), ça fonctionne sur mon écran de PC, mais quand je teste sur mobile et tablette, on dirait que ce n'est pas pris en compte. Il doit y avoir un truc que je n'ais pas compris...
page
code css main:
@charset "utf-8";
/* CSS Document */
html{ font-size: 100%; /*Évite un bug d'IE 6-7*/}
body{
background: url(../interface/Background_XCEL_2013.png) center repeat #fff;
font-family: Verdana, Geneva, sans-serif;
margin: 0 auto;
padding: 0 0 1em 0;
font-size: 1em;
line-height: 1.4;
color: #000;
}
header,nav,section,article,aside,footer{ display:block;}
@media screen and (max-width: 849px){
header,nav,section,footer,#global{
width: 100%;
}
}
@media screen and (min-width: 850px){
header,nav,section,footer,#global{
width: 850px;
}
}
header,nav,section,footer,#global{
margin: 0 auto;
}
img, object, form, iframe{
border:none;
margin: 0;
padding: 0;
}
div{ margin: 0 auto;}
address{
display: block;
width: auto;
margin: 0 20px;
padding: 0 20px 0px;
float: left;
font-size: 0.8em;
font-style: normal;
text-align: left;
font-weight: normal;
line-height: normal;
}
address span{
font-size: 1.5em;
font-weight: bold;
text-align: center;
line-height: 1.8;
}
/*---------Titre--------*/
h1, h2, h3, h4, h5{
/*line-height: 1.2;*/
font-weight: bold;
/*margin: 1em 0 0.5em 0;*/
}
h1, h2, h3{text-align: center;}
h1{font-size: 2.1em;}
h2{
font-weight: normal;
font-size: 1.3em;
font-variant: small-caps;
}
h3{
font-size: 1.2em;
margin: 0 0 0.7em 0;
font-weight: normal;
}
h4, h5, h6{font-size: 1em;}
h4{
font-variant: small-caps;
text-align: left;
}
/*---------Texte--------*/
p{
font-size: 0.8em;
line-height:normal;
padding: 0;
}
a, nav a:hover{color: rgb(247,142,30);}
a:active{outline: none;}
a:hover, a:active, a:focus{color: #ffb43b;}
a[rel=external]{
background: url(../interface/images/linkArrow.gif) right top no-repeat;
text-align: right;
padding-right: 20px;
}
a[rel=external]:hover, a[rel=external]:focus{background-position: right bottom;}
/*---------Liste--------*/
ul{
margin: 0.75em 0 0.75em 42px;
padding: 0;
}
ol {
margin: 0.75em 0 0.75em 42px;
padding: 0;
}
li{
font-size: 0.8em;
text-align:left;
}
li li{font-size: 1em;}
/*---------Tableau--------*/
table{
border-collapse:collapse;
margin: 10px auto;
}
table p{margin: 0;}
table thead{
}
table th{
padding: 5px;
border-bottom: solid 1px #cd8f2e;
border-right: solid 2px #000;
}
table tbody td, table tbody th{
padding: 10px;
border-right: solid 2px;
border-top: solid 1px;
border-color: #000;
border-collapse: collapse;
}
table td:last-child, table th:last-child {border-right: none;}
table thead th,{
margin: 0;
line-height: 1.2;
font-weight: bold;
font-size: 0.9em;
text-transform: uppercase;
text-align: center;
}
table h3, table h4{
margin: 0;
line-height: 1.2;
font-weight: bold;
font-size: 0.9em;
text-transform: uppercase;
text-align: center;
}
/*---------formulairs--------*/
form{
margin: 0 auto 0 auto;
text-align: center;
}
fieldset{
display: block;
border: solid 1px #000;
margin: 0 0 1em 0;
padding: 0 0 0.5em 0;
}
legend{
display: block;
width: 160px;
margin: 0 0 0 0.2em;
color: #000;
font-size: 0.9em;
font-weight: bold;
font-variant: small-caps;
}
input, button, select {
vertical-align: middle;
margin: 5px 0 3px 0;
}
label{display: inline-block;}
/*---------Prédéfini--------*/
.clear {
display: block;
clear: both;
}
.left{float: left;}
.right{float: right;}
.block{display: block;}
.inline-block{display: inline-block;}
.inline{display: inline;}
.center{text-align: center;}
.bold{font-weight: bold;}
.uppercase{text-transform: uppercase;}
img.center{
display: block;
margin: 0 auto;
}
.border{border: solid 1px rgb(247,142,30);}
.border-top{border-top: solid 1px rgb(247,142,30);}
.border-top2{border-top: solid 2px rgb(247,142,30);}
.border-bottom{border-bottom: solid 1px rgb(247,142,30);}
.border-bottom2{border-bottom: solid 2px rgb(247,142,30);}
.gradient-white{
/*background: url(../interface/background/orange-background.png) repeat 100%;*/
background-size: 100% 100%;
background: rgb(192,191,191); /* Old browsers */
background: -moz-linear-gradient(top, rgba(192,191,191,1) 0%, rgba(255,255,255,1) 2%, rgba(241,241,241,1) 46%, rgba(226,225,225,1) 47%, rgba(244,244,244,1) 97%, rgba(196,196,196,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(192,191,191,1)), color-stop(2%,rgba(255,255,255,1)), color-stop(46%,rgba(241,241,241,1)), color-stop(47%,rgba(226,225,225,1)), color-stop(97%,rgba(244,244,244,1)), color-stop(100%,rgba(196,196,196,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(192,191,191,1) 0%,rgba(255,255,255,1) 2%,rgba(241,241,241,1) 46%,rgba(226,225,225,1) 47%,rgba(244,244,244,1) 97%,rgba(196,196,196,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(192,191,191,1) 0%,rgba(255,255,255,1) 2%,rgba(241,241,241,1) 46%,rgba(226,225,225,1) 47%,rgba(244,244,244,1) 97%,rgba(196,196,196,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(192,191,191,1) 0%,rgba(255,255,255,1) 2%,rgba(241,241,241,1) 46%,rgba(226,225,225,1) 47%,rgba(244,244,244,1) 97%,rgba(196,196,196,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(192,191,191,1) 0%,rgba(255,255,255,1) 2%,rgba(241,241,241,1) 46%,rgba(226,225,225,1) 47%,rgba(244,244,244,1) 97%,rgba(196,196,196,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c0bfbf', endColorstr='#c4c4c4',GradientType=0 ); /* IE6-8 */
}
.gradient-orange{
/*background: url(../interface/background/orange-background.png) repeat 100%;*/
background-size: 100% 100%;
background: rgb(249,159,63); /* Old browsers */
background: -moz-linear-gradient(top, rgba(249,159,63,1) 0%, rgba(250,167,65,1) 49%, rgba(242,145,39,1) 50%, rgba(247,142,30,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(249,159,63,1)), color-stop(49%,rgba(250,167,65,1)), color-stop(50%,rgba(242,145,39,1)), color-stop(100%,rgba(247,142,30,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(249,159,63,1) 0%,rgba(250,167,65,1) 49%,rgba(242,145,39,1) 50%,rgba(247,142,30,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(249,159,63,1) 0%,rgba(250,167,65,1) 49%,rgba(242,145,39,1) 50%,rgba(247,142,30,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(249,159,63,1) 0%,rgba(250,167,65,1) 49%,rgba(242,145,39,1) 50%,rgba(247,142,30,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(249,159,63,1) 0%,rgba(250,167,65,1) 49%,rgba(242,145,39,1) 50%,rgba(247,142,30,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f99f3f', endColorstr='#f78e1e',GradientType=0 ); /* IE6-8 */
}
.gradient-black {
/*background: url(../interface/gradient-gray2.png) repeat-x top;*/
background-size: 100% 100%;
background: rgb(35,31,32); /* Old browsers */
background: -moz-linear-gradient(top, rgba(90,90,90,1) 0%, rgba(28,28,27,1) 49%, rgba(3,3,3,1) 50%, rgba(35,31,32,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(90,90,90,1)), color-stop(49%,rgba(28,28,27,1)), color-stop(50%,rgba(3,3,3,1)), color-stop(100%,rgba(35,31,32,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(90,90,90,1) 0%,rgba(28,28,27,1) 49%,rgba(3,3,3,1) 50%,rgba(35,31,32,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(90,90,90,1) 0%,rgba(28,28,27,1) 49%,rgba(3,3,3,1) 50%,rgba(35,31,32,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(90,90,90,1) 0%,rgba(28,28,27,1) 49%,rgba(3,3,3,1) 50%,rgba(35,31,32,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(90,90,90,1) 0%,rgba(28,28,27,1) 49%,rgba(3,3,3,1) 50%,rgba(35,31,32,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5a5a5a', endColorstr='#231f20',GradientType=0 ); /* IE6-8 */
}
.gradient-gray {
/*background: url(../interface/gradient-gray2.png) repeat-x top;*/
background-size: 100% 100%;
background: rgb(109,110,113); /* Old browsers */
background: -moz-linear-gradient(top, rgba(109,110,113,1) 0%, rgba(74,75,76,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(109,110,113,1)), color-stop(100%,rgba(74,75,76,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(109,110,113,1) 0%,rgba(74,75,76,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(109,110,113,1) 0%,rgba(74,75,76,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(109,110,113,1) 0%,rgba(74,75,76,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(109,110,113,1) 0%,rgba(74,75,76,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6d6e71', endColorstr='#4a4b4c',GradientType=0 ); /* IE6-8 */
}
.shadow{text-shadow: 0 0 0.8em #000, 0 0 0.8em #000, 0 0 0.6em #000, 0 0 0.2em #000, 0 0 0.2em #000;}
#IE .shadow{-ms-filter:"glow(color=#000000,strength=3)";}
/*#IE .shadow a:hover{ filter: none;}*/
@media screen and (max-width: 800px){
#global{
margin: 0;
}
}
@media screen and (min-width: 801px){
#global{
box-shadow: inset 0 0 1px rgba(255,255,255,.8), inset 0 1px 0 rgba(255,255,255,.8), 0 1px 2px rgba(0,0,0,.3);
margin: 2% auto 0;
}
}
#global{
background-color: rgb(244,244,244);
border: 1px solid rgba(27, 27, 27, 0.2);
}
/*-----------------------------TOP-----------------------------*/
header{
background: url(../interface/banner.jpg) no-repeat 80% 5% /cover;
}
header h1{
margin: 0;
padding: 3% 2% 0;
text-align: left;
}
header img{
margin:0;
max-width: 100%;
height: auto;
width: auto; /* Fix for IE */
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/*-----------------------------/TOP-----------------------------*/
/*-----------------------------Zone texte-----------------------------*/
#content{
display: block;
margin: 2%;
min-height: 325px;
overflow: auto;
}
section{padding: 2%;}
aside{padding: 2%;}
aside img{max-width: 100%}
@media only screen and (min-width: 320px) {
section{
max-width: 100%;
}
aside{
max-width: 100%;
}
}
@media only screen and (min-width: 550px) {
section{
max-width: 58%;
float: left;
}
aside{
max-width: 30%;
float: right;
}
}
@media only screen and (min-width: 767px) {
aside{
max-width: 33%;
}
}
@media only screen and (min-width: 850px) {
aside{
max-width: 35%;
}
}
/*-----------------------------/Zone texte-----------------------------*/
/*--------------------------Pied de page--------------------------*/
footer nav ul li{
background: none repeat scroll 0 0 transparent;
border: medium none;
display: inline-block;
font-size: 0.8em;
font-weight: normal;
padding: 3px 0;
text-shadow: none;
text-transform: none;
}
footer nav ul li a{
border-right: 1px solid rgba(156, 154, 154, 0.5);
color:#6d6d6d;
padding: 0 10px;
}
footer nav ul li:hover{ background: none;}
footer nav ul li a:hover{ color: #F78E1E;}
footer p.copyright{
color:#6d6d6d;
text-align: center;
}
/*-----------------------------Mise en page-----------------------------*/
css menu:
@charset "utf-8";
/* CSS Document */
/*-----------------------------Menu-----------------------------*/
@media screen and (min-width: 180px) and (max-width: 550px){ /*pour petit écran*/
nav ul li{
background-size: 100% 100%;
background: rgb(35,31,32); /* Old browsers */
background: -moz-linear-gradient(top, rgba(90,90,90,1) 0%, rgba(28,28,27,1) 49%, rgba(3,3,3,1) 50%, rgba(35,31,32,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(90,90,90,1)), color-stop(49%,rgba(28,28,27,1)), color-stop(50%,rgba(3,3,3,1)), color-stop(100%,rgba(35,31,32,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(90,90,90,1) 0%,rgba(28,28,27,1) 49%,rgba(3,3,3,1) 50%,rgba(35,31,32,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(90,90,90,1) 0%,rgba(28,28,27,1) 49%,rgba(3,3,3,1) 50%,rgba(35,31,32,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(90,90,90,1) 0%,rgba(28,28,27,1) 49%,rgba(3,3,3,1) 50%,rgba(35,31,32,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(90,90,90,1) 0%,rgba(28,28,27,1) 49%,rgba(3,3,3,1) 50%,rgba(35,31,32,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5a5a5a', endColorstr='#231f20',GradientType=0 ); /* IE6-8 */
border-bottom: solid 1px rgb(247,142,30);
}
nav ul li:last-child{ border-bottom: none;}
nav ul li .subMenu {}
nav ul li .subMenu li{
text-align: left;
list-style: none;
background:none;
border: none;
}
}
@media screen and (min-width: 551px) and (max-width: 699px) { /*pour grand écran*/
nav ul>li{
}
nav .subMenu{
width: 50%;
}
nav ul li .subMenu li{
background: none;
text-align:center;
display: block;
border: none;
}
nav ul li .subMenu.accessoires{}
nav ul li .subMenu.support{}
}
@media screen and (min-width: 550px){
nav{
position:relative; /*pour placer le menu au-dessus*/
}
nav ul>li{
border-right: 1px solid rgba(156, 154, 154, 0.5);
border-left: 1px solid rgba(0, 0, 0, 0.5);
display: inline-block;
border-top: none;
border-bottom: none;
}
nav ul ul{
position: absolute;
left: 0;
}
nav .subMenu{
background: rgb(74, 75, 76);
border: 1px solid #F78E1E;
border-top: none;
top: 32px;
z-index: 900;
}
nav ul ul li{
position: relative;
}
}
@media screen and (min-width: 700px) {
nav .subMenu{
width: 99.8%;
/*left: 0;*/
}
nav ul li .subMenu li{
background: none;
text-align:center;
display: table-cell;
border-right: 1px solid rgba(156, 154, 154, 0.5);
border-left: 1px solid rgba(0, 0, 0, 0.5);
}
nav ul li .subMenu.accessoires{ left:0;}
nav ul li .subMenu.support{ left:0}
nav ul li .subMenu li:first-child{ border-left: none;}
nav ul li .subMenu li:last-child{ border-right: none;}
nav ul li .subMenu.accessoires li{ width: 20%;}
nav ul li .subMenu.support li{ width: 25%}
}
nav{}
nav li{cursor:pointer;}
nav ul,footer nav ul{
margin:0;
padding:0;
}
nav ul>li{
padding: 5px 10px;
color: #F4F4F4;
font-size: 1em;
font-weight: bold;
text-transform: uppercase;
text-shadow: -1px -1px 0px #101010, 1px 1px 0px #505050;
z-index: 1000;
}
nav ul li a{
color: #F4F4F4;
}
nav .subMenu{
display: none;
padding: 10px 0;
font-size: 1em;
margin: 0 auto;
cursor: default;
}
nav ul li .subMenu li{
font-size: 0.9em;
}
nav ul li a:hover, nav ul li a:focus{color: #fff;}
nav ul li:hover,
nav ul li:focus{
background-size: 100% 100%;
background: rgb(109,110,113); /* Old browsers */
background: -moz-linear-gradient(top, rgba(109,110,113,1) 0%, rgba(74,75,76,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(109,110,113,1)), color-stop(100%,rgba(74,75,76,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(109,110,113,1) 0%,rgba(74,75,76,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(109,110,113,1) 0%,rgba(74,75,76,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(109,110,113,1) 0%,rgba(74,75,76,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(109,110,113,1) 0%,rgba(74,75,76,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6d6e71', endColorstr='#4a4b4c',GradientType=0 ); /* IE6-8 */
}
nav ul li:hover .subMenu, nav ul li:focus .subMenu{display:block;}
/*-----------------------------/Menu-----------------------------*/les 2 feuilles de style seront mis ensemble en fin de prod.