Sujet Précédent Sujet Suivant

Responsive HTML/CSS

Fermé
webmaster487 - 31 oct. 2020 à 12:22
 Tutlane - 22 mai 2021 à 06:22
Bonjour,
J'aimerais mettre mon site en responsive, comment fais-je ?
:
<html>
<head>
<title>IGV</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
</head>
<body class="is-preload">
<!-- Header -->
<div id="page" class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<section id="header">
<header>

<div id="logo" class="container-fluid red" ><label for="tel"><img src="images/!1$eoSlcFB1!48X.png"/></div>
<br>
<div id="pub" class="col-xs-12 col-sm-12 col-md-4 col-lg-4" for="tel"><img src="images/8154htoSjuyc89X.png"/ width="1250" height="250" ></div>
<style type="text/css">
h1 {
color: red;
}
</style>
<h1 class="class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> T***************
                                                • </h1>

<form action="visualisation_find.html"method="post">
<div class="class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div id="tel"> <input type ="tel" name="tel" pattern="0676248760" title="entrée un numéro de téléphone valide" size="18" minlength="10" maxlength="10" required id=tel placeholder="0676248760" /> </div><br>
</div>


<div id="text1"><small> ********************

</small></div>
<br><br><br>

<div class ="class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<label id="text2" class="class="col-xs-12 col-sm-12 col-md-4 col-lg-4" for="pays">Qu'elle est le pays du numéro de téléphone ? </label> <br>
<select name="pays" id="pays">
<option value="france">France
</option>
<option value="Royaume-Uni
">Royaume-Uni

</option>
<option value="États-Unis">États-Unis
</option>
<option value="Inde">Inde
</option>
<option value="Russie">Russie
</option>
<option value="Nouvelle-Zélande">Nouvelle-Zélande
</option>
</select>
</div>

<form>

<br>
<br>
<div class="col-12">
<ul class="actions">
<input type="submit" value="Visualiser" id=envoie/>
</ul>
</div>
</div>
</header>

<footer>
<a href="#banner" class="button style2 scrolly-middle">Information</a>
</footer>
</section>



<!-- Feature 1 -->
<article id="first" class="container box style1 right">
<a href="#" class="image fit"><img src="images/Ome$WS!tDz658$8.jpg" alt="" /></a>
<div class="inner">
<header>
<a href="#first" class="button style2 scrolly"><h2>*********<br />
</h7> </a>
</header>
<p>****************************************
                                                                      • </p>

</div>
</article>

<!-- Feature 2 -->
<article class="container box style1 left">
<a href="#" class="image fit"><img src="images/g!3!S11CcUpT6$h.jpg" alt="" /></a>
<div class="inner">
<header>
<h2><br />
Comment ?</h2>
</header>
<p>**************************************************
                                                                            • . </p>

</div>
</article>





<section id="footer">
<ul class="icons">
<li><a href="#" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href="#" class="icon brands fa-facebook-f"><span class="label">Facebook</span></a></li>
<li><a href="#" class="icon brands fa-google-plus-g"><span class="label">Google+</span></a></li>
<li><a href="#" class="icon brands fa-pinterest"><span class="label">Pinterest</span></a></li>
<li><a href="#" class="icon brands fa-dribbble"><span class="label">Dribbble</span></a></li>
<li><a href="#" class="icon brands fa-linkedin-in"><span class="label">LinkedIn</span></a></li>
</ul>
<div class="copyright">
<ul class="menu">
<li>© ***************. All rights reserved.</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
</ul>
</div>
</section>

<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/jquery.poptrox.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>

</body>
</div>
<style type="text/css">
@media screen and (max-width: 1180px)
{

#page
{
display: flex;
width: auto;
lighting-color: red;

}

#logo
{
width: 108%;
max-width: 400px;
height: 600px;
background-position: top right;
margin-top: auto;
overflow: hidden;

}

#pub
{

display: flex;
width: auto;

}

#tel
{

}
small
{

font-size: 16px;
}
#text2
{
display: flex;
flex-direction: column-reverse;
}
}
</style>
A voir également:

3 réponses

Réponse 1 / 3
Achab
Modifié le 31 oct. 2020 à 23:17
Bonjour,
il n'y a pas une façon d'avoir un design responsive.
Vous pouvez commencer par chercher et vous trouverez des trucs comme ça:

https://developer.mozilla.org/fr/docs/Apprendre/CSS/CSS_layout/Responsive_Design
https://www.w3schools.com/css/css_rwd_intro.asp

voir en particulier les media queries puisque vous en utilisez mais même sans on peut très bien avoir un affichage adaptatif à plusieurs résolutions. Pour les écrans de téléphones (plus petits) ça demande quand même pas mal de travail c'est pour cela que rien ne vous empêche de combiner avec les media queries.
Tester différents appareils(c'est fournit par les outils de développement de quelques navigateurs) reste une bonne idée.

Il faudrait surtout que vous ayez une question plus précise si vous rencontrez un problème.
"J'aimerais mettre mon site en responsive, comment fais-je ? "
En faisant un design responsive, CQFD : en apprenant les méthodes pour cela(ou utiliser des outils faits pour ça comme Bootstrap.

note: Comme je voit que vous utilisez du JavaScript vous pouvez faire un tour du côté des polyfills comme ceux proposé par modernizr. On s'éloigne du sujet du responsive design mais côté adaptation à tout les appareils/navigateurs(même ceux pas mis à jour) c'est nécessaire. Il y a aussi les règles d'accessibilité sur le même sujet(voir WAI).
0
Réponse 2 / 3
jordane45 Messages postés 38391 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 22 janvier 2025 4 731
31 oct. 2020 à 23:15
Bonjour,

Sachant que tu charges déjà BootStrap dans ton projet .... ton site est déjà responsive...

Ne te reste qu'à utiliser les class bootstrap correctement dans tes pages pour que ça marche.
Et là.. pas de miracles... il suffit de lire la doc bootstrap et les nombreux tutos/exemples disponibles sur le net à son sujet...

https://getbootstrap.com/docs/4.0/getting-started/introduction/
https://www.w3schools.com/bootstrap4/

0
Réponse 3 / 3
Tutlane
22 mai 2021 à 06:22
Comme d'autres le suggèrent, utilisez le bootstrap pour implémenter un site Web réactif. Pour savoir comment utiliser bootstrap pour implémenter des sites Web réactifs, reportez-vous à

https://www.tutlane.com/tutorial/bootstrap
0

Discussions similaires

la balise <br> ou <br />
faamugol -
rwaness -

8 réponses
<br> ou <br /> ou </br>
corentin.93 -
jessy006 -

11 réponses
Saut de lignes sans <br/>
Rapi-shiny -
Rapi-shiny -

13 réponses
Balise </br>
erf -
erf -

3 réponses
Que veut dire <p>&nbsp;</p>?
quinn mallory -
prosthetiks -

3 réponses