Responsive-design

Adapter son site Web à n'importe quelle résolution d'écran

11 décembre 2017 à 21:00:38

Bonjour,

Je suis actuellement en train de concevoir un site web pour une amie.J'ai un petit problème : lorsque j'ai écrit les lignes de code html et css sur mon ordinateur, pour la taille des images écrient en pourcentage je l'ai fait en fonction de mon ordinateur (2160x1440). Cependant, lorsque mon amie a ouvert le site sur son ordinateur (1366x768), les images étaient déformées. Je me doute que ce problème provient des différentes résolutions d'écrans et qu'il faille utiliser la méthode du responsive-design du cours sur OpenClassRoom. Je souhaiterais donc savoir s'il est possible d'adapter les images selon la résolution de n'importe quelle écran et pas seulement d'une résolution inférieur ou supérieur à une certaine résolution. Je m'explique : je voudrais que les images soit de la même taille que ce soit une résolution de 2160x1440, de 1366x768, de 1920x1080, de 1440x900 etc.

Merci pour votre aide.

Je souhaiterais que les images se placent comme ceci :

index de mon site

Voici mon code HTML :

<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" type="text/css" href="index.css">
		<title>Femogene</title>
	</head>

	<body bgcolor="#FFFFFFFF">
		<!--base-->
		<img src="images/logo/1.PNG" id="logo1">
		<img src="images/baseline.PNG" class="baseline">
		<a href="about.html"><h4 class="about">ABOUT</h4></a>
		<a href="contact.html"><h4 class="contact" align="center">CONTACT</h4></a>
		<a href="collection.html"><h4 div class="collection">COLLECTION</h4></a>
		<a href="about.html"><img src="images/flecheg.png" width="15%" height="15%" class="flecheg"></a>
		<a href="collection.html"><img src="images/fleched.png" width="15%" height="15%" class="fleched"></a>
		<!--contenu-->
		<img src="images/mood/1.JPG" class="mood1">
		<img src="images/mood/2.JPG" class="mood2">
	</body>
</html>

Et voici mon code CSS concernant les 2 images sur l'index :

body {
  width: 100%;
  margin: auto;
}

.mood1 {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    position: absolute;
	top:32%;
	left:5%;
	width:40%;
	height:35%;
}

.mood2
{
	position: absolute;
	top:17%;
	left:36%;
	width:50%;
	height:65%;
}

.mood1:hover
{
	background: transparent;
	border-color: #9D9B6B;
	border-width: 4 4 4px;
	border-style: solid;
	z-index: 2;
	width: 43%;
	height: 38%;
}

.mood2:hover
{
	background: transparent;
	border-color: #9D9B6B;
	border-width: 4 4 4px;
	border-style: solid;
	z-index: 2;
	width: 53%;
	height: 68%;
}

Hidoimatsu

12 décembre 2017 à 9:47:11

Bonjour,

TomTexier a écrit:

Je souhaiterais donc savoir s'il est possible d'adapter les images selon la résolution de n'importe quelle écran et pas seulement d'une résolution inférieur ou supérieur à une certaine résolution. Je m'explique : je voudrais que les images soit de la même taille que ce soit une résolution de 2160x1440, de 1366x768, de 1920x1080, de 1440x900 etc.

Tu te contredis un peu, là. Si tu souhaites que les images s'adaptent selon la taille d'écran, alors elles ne seront pas de la même taille sur différentes résolutions. Peut-être voulais-tu parler des proportions ?

Mais pour répondre à ta question : oui, c'est possible.

Par contre, je vois dans ton code que non seulement tu donnes à tes images une taille en pourcentage, mais également une position en pourcentage... Alors effectivement, selon les écrans, il risque d'y avoir beaucoup de décalages. D'ailleurs, puisque tu les as glissées directement dans le body, rien qu'en redimensionnant ta fenêtre, tu devrais t'en rendre compte.

Je te conseille d'aller faire un tour du côté des cours OC. Jette également un oeil aux media queries.

Neveer

12 décembre 2017 à 12:21:22

Bonjour,

Cela devrait t'aider au sujet des media queries :

/* Pour résolution d'écran d'au maximum de 480px (smartphone) */
@media only screen and (max-width: 480px) {
    
}

/* Pour une résolution d'écran d'au maximum 768px (tablette) */
@media only screen and (max-width: 768px) {

}

/* Pour une résolution d'écran d'au minimum 768px (tablette et +) */
@media only screen and (min-width: 768px) {

}

/* Pour une résolution d'écran d'au minimum 992px (tablette, ordinateur et +) */
@media only screen and (min-width: 992px) {

}

/* Tu peux même dire que tu veux afficher une propriété entre deux largeur */
@media only screen and (min-width: 480px) and (max-width: 992px) {

}

<!-- Tu peux aussi importer une feuille de style selon une largeur défini -->
<link rel="stylesheet" media="screen and (max-width: 1280px)" href="petite_resolution.css" />

Je te conseil vivement à lire ce tutoriel :

https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/mise-en-page-adaptative-avec-les-media-queries

Portfolio en cours de construction : http://www.dev-neveer.esy.es/index.php?controleur=accueil&action=index

JellaliSami

12 décembre 2017 à 13:14:13

Bonjour, il vous reste cette meta aprés le head

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

-
Edité par JellaliSami 12 décembre 2017 à 13:14:58

Codez en HTML, CSS avec les hits de B2oba

Tom Texier

17 janvier 2018 à 0:41:50

Merci beaucoup pour toutes vos réponses, j'ai donc organiser mon site dans des blocks et utilisé vos méthodes, c'est parfait !

Lucky13

17 janvier 2018 à 2:24:15

Hello,

Je te conseil de passer ton code HTML au validateur, tu vas être surpris

-> https://validator.w3.org/#validate_by_input

Et n'oublie pas l’accessibilité, les alt pour tes images <img src="..." alt="..." />

❶ Feuille de style introuvable ❷ Chemins relatifs et absolus ❸ addEventListener & API Selectors ❹ Paletton colors ❺ Animations complexes en JS & CSS