Transformer une page version standard pour version mobile

Résolu
dannezri Messages postés 52 Date d'inscription   Statut Membre Dernière intervention   -  
 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
A voir également:

1 réponse

Réponse 1 / 1
Rhajid
 
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
0