Transformer une page version standard pour version mobile [Résolu/Fermé]

Signaler
Messages postés
53
Date d'inscription
vendredi 24 juillet 2015
Statut
Membre
Dernière intervention
8 août 2017
-
 Rhajid -
Bonjour,
J'ai une page html (avec un lecteur audio) que j'ai téléchargé et j'aimerai redimensionner cette page pour une utilisation mobile c'est à dire 1242 x 2208 pixels.

Voici le code html de l'index

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="../plugin/css/style.css">
<link rel="stylesheet" type="text/css" href="css/demo.css">
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="../plugin/jquery-jplayer/jquery.jplayer.js"></script>
<script type="text/javascript" src="../plugin/ttw-music-player-min.js"></script>
<script type="text/javascript" src="js/myplaylist.js"></script>

<script type="text/javascript">
$(document).ready(function(){
var description = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id tortor nisi. Aenean sodales diam ac lacus elementum scelerisque. Suspendisse a dui vitae lacus faucibus venenatis vel id nisl. Proin orci ante, ultricies nec interdum at, iaculis venenatis nulla. ';

$('body').ttwMusicPlayer(myPlaylist, {
autoPlay:false,
description:description,
jPlayer:{
swfPath:'../plugin/jquery-jplayer' //You need to override the default swf path any time the directory structure changes
}
});
});
</script>
</head>
<body>

<div id="title"></div>
<a href="" id="download">Download Here</a>
</body>
</html>



et voici celui du css

/*@font-face {*/
/*font-family: Lato;*/
/*src: url('../fonts/Lato-Regular.ttf');*/
/*}*/

/*@font-face {*/
/*font-family: Lato Italic;*/
/*src: url('../fonts/Lato-Italic.ttf');*/
/*}*/

/*@font-face {*/
/*font-family: Lato Bold;*/
/*src: url('../fonts/Lato-Bold.ttf');*/
/*}*/

html { overflow-y: scroll; }

body {
background: #444 url(../images/bg.jpg) repeat 0 0 scroll;
}

#title{
background:transparent url(../images/title.png) 0 0 scroll;
position:absolute;
top:60px;
left:24px;
height:62px;
width:334px;
}

#download{
position:absolute;
top:132px;
left:30px;
text-decoration:none;
font-size:12px;
color:#999;
font-family:arial, sans-serif;
}

#download:hover{
color:#fff;
}




Merci

1 réponse

Salut,
c'est possible avec les media queries de CSS 3 de faire plusieurs feuilles de styles qui vont être utilisés en fonction des dimensions.

http://www.alsacreations.com/article/lire/930-css3-media-queries.html

L'article est un peu vieux mais il y a un exemple en milieu de page tenant compte de dimensions de l'écran.

Ceci dit: 1242 x 2208 pixels me paraît beaucoup pour pas mal de mobiles mais je peut me tromper.
Ici la liste de tous les paramètres/médias possibles pour affiner la feuille de style choisie:

http://www.w3schools.com/cssref/css3_pr_mediaquery.asp