Sujet Précédent Sujet Suivant

Smartphone portrait - paysage

Fermé
steve-elipz Messages postés 148 Date d'inscription mercredi 4 avril 2012 Statut Membre Dernière intervention 7 avril 2018 - 29 août 2014 à 23:08
steve-elipz Messages postés 148 Date d'inscription mercredi 4 avril 2012 Statut Membre Dernière intervention 7 avril 2018 - 29 août 2014 à 23:30
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 

<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
   }
}
A voir également:

1 réponse

Réponse 1 / 1
steve-elipz Messages postés 148 Date d'inscription mercredi 4 avril 2012 Statut Membre Dernière intervention 7 avril 2018
29 août 2014 à 23:30
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 }
}
0

Discussions similaires

Convertir photo en mode portrait
Hugzerrr -
zoulou33 -

1 réponse
changer une photo paysage et portrait
arthus76 -
lala -

6 réponses
Format Paysage libreofficecalc
Unfideleutilisateurdelibreofficequinecomprendpastout -
Raymond PENTIER -

1 réponse