Smartphone portrait - paysage
steve-elipz
Messages postés
171
Statut
Membre
-
steve-elipz Messages postés 171 Statut Membre -
steve-elipz Messages postés 171 Statut Membre -
Bonjour,
j ai adapté mon site en version pc et smart. cependant j ai voulu introduire un mode portrait et un landscape mais du coup page vierge!
voici mes codes
accueil.html
portrait.css
paysage.css
j ai adapté mon site en version pc et smart. cependant j ai voulu introduire un mode portrait et un landscape mais du coup page vierge!
voici mes codes
accueil.html
<link rel="stylesheet" media="(orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="(orientation:landscape)" href="paysage.css">
portrait.css
Portrait:
@media only screen and (min-device-width: 320px) and (max-device-width: 479px) {
body {
padding: 0 !important;
}
.infoShowWrapper {
width: 268px;
}
.heroImage {
margin-top: 0;
height: 200px;
width: 100%;
background-image: url(https://www.000webhost.com/migrate?static=true no-repeat center center;
}
.navbar-fixed-top {
margin: 0 !important;
}
.box-item {
width: 280px;
}
.seaBkg {
background-image: url(https://www.000webhost.com/migrate?static=true
}
}
paysage.css
Landscape:
@media only screen and (min-device-width: 480px) and (max-device-width: 640px) {
body {
padding: 0 !important;
}
.heroImage {
margin-top: 0;
height: 200px;
width: 100%;
background: #fff url(https://www.000webhost.com/migrate?static=true no-repeat center center;
}
.navbar-fixed-top {
margin: 0 !important;
}
.box-item {
width: 440px;
}
.infoShowWrapper {
width: 440px;
}
.seaBkg {
background-image: url(https://www.000webhost.com/migrate?static=true
}
}
1 réponse
-
j ai meme essayé ca... mais sur pc, iphone, android en portrait en paysage peut importe tout reste rouge???
accueil.html
<link rel="stylesheet" href="smart.css" />
smart.css
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
body { background: grey }
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
body { background: red }
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
body { background: blue }
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
body { background: black }
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
body { background: yellow }
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
body { background: green }
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
body { background: brown }
}
