Question sur responsive

**leroilion94** · 18/03/2016, 23h49

bonjours, juste une question

j'ai un lien http://lab.maltewassermann.com/viewport-resizer/

et quand je passe par exemple http://www.developpez.net/

et quand je veux visualiser 1920*1080
il y a le côté droit qui est hors de l'ecran

es-ce que ca vien du site ou ça vien de chez vous car vous n'avez pas fait media

merci

Invité · 19/03/2016, 10h27

Bonjour,

le "viewport-resizer" a certainement déjà des bordures de chaque coté (et barres de scroll).

Donc si ton écran fait 1920px, et que tu veux visualiser avec le "viewport-resizer" en 1920px, il est normal que tu doivent un peu scroller pour voir le contenu.

le site www.developpez.net "standard" est responsive jusqu'à un certain point, au-delà duquel il existe une version "Mobile" du site.
Regarde tout en bas de page à gauche : un select avec écrit "standard". Passe-le à "Mobile".

**leroilion94** · 19/03/2016, 12h36

merci je vous ai fait un petit cadre

http://communautaire.legtux.org/cadre.php

avec ces media

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
<!--
/*********************************************************************************************************Début du desing Respensive Ecrans ordinateurs*********************************************************************************************************/
      @media (min-width: 1200px)
	  {
/*********************************************************************************************************Début du body******************************************************************************************************************************************/
      body
	  {
	  font-family:Arial, Helvetica, sans-serif;/* un font texte */
	  font-size:11px; /* taille du texte */
/*	  background-color:#F8FFE6; /* Couleur de fond */
	  color:#000000; /* couleur du texte */
	  }
/*********************************************************************************************************Fin du body********************************************************************************************************************************************/
 
/*********************************************************************************************************Début du global****************************************************************************************************************************************/
      .global
	  {
	  background-color:#9900FF;
	  border:#CCCCCC 1px solid;
	  margin:10px;
	  min-height:100px;
	  }
/*********************************************************************************************************Fin du global******************************************************************************************************************************************/
     }
 
/*********************************************************************************************************Fin du desing Respensive Ecrans ordinateurs***********************************************************************************************************/
/*********************************************************************************************************Début du desing Respensive Ecrans ordinateurs*********************************************************************************************************/
 
	  @media (min-width: 980px)
	  {
/*********************************************************************************************************Début du body******************************************************************************************************************************************/
      body
	  {
	  font-family:Arial, Helvetica, sans-serif;/* un font texte */
	  font-size:11px; /* taille du texte */
/*	  background-color:#F8FFE6; /* Couleur de fond */
	  color:#000000; /* couleur du texte */
	  }
/*********************************************************************************************************Fin du body********************************************************************************************************************************************/
 
/*********************************************************************************************************Début du global****************************************************************************************************************************************/
      .global
	  {
	  background-color:#9900FF;
	  border:#CCCCCC 1px solid;
	  margin:10px;
	  min-height:100px;
	  }
/*********************************************************************************************************Fin du global******************************************************************************************************************************************/
     }
/*********************************************************************************************************Fin du desing Respensive Portables et tablettes*******************************************************************************************************/
 
/*********************************************************************************************************Début du desing Respensive Portable et tablette*******************************************************************************************************/
 
      @media (min-width: 768px) and (max-width: 979px)
	  {
/*********************************************************************************************************Début du body******************************************************************************************************************************************/
      body
	  {
	  font-family:Arial, Helvetica, sans-serif;/* un font texte */
	  font-size:11px; /* taille du texte */
/*	  background-color:#F8FFE6; /* Couleur de fond */
	  color:#000000; /* couleur du texte */
	  }
/*********************************************************************************************************Fin du body********************************************************************************************************************************************/
 
/*********************************************************************************************************Début du global****************************************************************************************************************************************/
      .global
	  {
	  background-color:#9900FF;
	  border:#CCCCCC 1px solid;
	  margin:10px;
	  min-height:100px;
	  }
/*********************************************************************************************************Fin du global******************************************************************************************************************************************/
     }
/*********************************************************************************************************Fin du desing Respensive Portable et tablette*********************************************************************************************************/
/*********************************************************************************************************Début du desing Respensive Portable et tablette*******************************************************************************************************/
 
      @media (max-width: 767px)
	  {
/*********************************************************************************************************Début du body******************************************************************************************************************************************/
      body
	  {
	  font-family:Arial, Helvetica, sans-serif;/* un font texte */
	  font-size:11px; /* taille du texte */
/*	  background-color:#F8FFE6; /* Couleur de fond */
	  color:#000000; /* couleur du texte */
	  }
/*********************************************************************************************************Fin du body********************************************************************************************************************************************/
 
/*********************************************************************************************************Début du global****************************************************************************************************************************************/
      .global
	  {
	  background-color:#9900FF;
	  border:#CCCCCC 1px solid;
	  margin:10px;
	  min-height:100px;
	  }
/*********************************************************************************************************Fin du global******************************************************************************************************************************************/
     }
/*********************************************************************************************************Fin du desing Respensive Portable et tablette*********************************************************************************************************/
 
/*********************************************************************************************************Début du desing Respensive Portables******************************************************************************************************************/
 
      @media (max-width: 480px)
	  {
/*********************************************************************************************************Début du body******************************************************************************************************************************************/
      body
	  {
	  font-family:Arial, Helvetica, sans-serif;/* un font texte */
	  font-size:11px; /* taille du texte */
/*	  background-color:#F8FFE6; /* Couleur de fond */
	  color:#000000; /* couleur du texte */
	  }
/*********************************************************************************************************Fin du body********************************************************************************************************************************************/
 
/*********************************************************************************************************Début du global****************************************************************************************************************************************/
      .global
	  {
	  background-color:#9900FF;
	  border:#CCCCCC 1px solid;
	  margin:10px;
	  min-height:100px;
	  }
/*********************************************************************************************************Fin du global******************************************************************************************************************************************/
     }
/*********************************************************************************************************Fin du desing Respensive Portables********************************************************************************************************************/
-->
</style></head>
 
<body>
 
 
<div class="global"></div>
</body>
</html>

là tout les media on voit bien la bordure droite

et quand on visualise 1920*1080 le cadre continue hors de mon ecrant il n'y a pas de scrool en bas pour titre info

es-ce que c'est normal ou pas
merci

peut-être il faut rajouté une autre media ?

**leroilion94** · 10/04/2016, 17h54

bonjours, je suis gentil j'attendais 1 mois pour faire un petit up

je repose ma petite question

quand je visualise avec cette outil

http://lab.maltewassermann.com/viewport-resizer/

et que je selectione et que je reclique sur Customize: 1920x1080

mon cadre dépasse de l’écran

il n'y a pas de scrool

a votre avis c'est normal ou ca vient d'un bug ou bien c'est parce que je n'ai pas mis tout les media css

merci de votre gentille

Invité · 10/04/2016, 18h28

Oui.

**leroilion94** · 10/04/2016, 18h52

oui a qu'elle question

bug ou il faut rajouter d'autres média si oui lesquelles

merci

Question sur responsive

Responsive design en CSS

Vue hybride

Discussions similaires

Partager

Partager