Questions marquées «responsive-design»

La conception Web réactive (RWD) est une approche de la conception et du développement Web qui vise à créer des sites pour offrir des expériences optimales sur une large gamme d'appareils en fonction de la taille de l'écran, de la plate-forme et de l'orientation.

10
Aligner verticalement une image à l'intérieur d'un div avec une hauteur réactive
J'ai le code suivant qui configure un conteneur dont la hauteur change avec la largeur lorsque le navigateur est redimensionné (pour maintenir un rapport hauteur / largeur carré). HTML <div class="responsive-container"> <div class="dummy"></div> <div class="img-container"> <IMG HERE> </div> </div> CSS .responsive-container { position: relative; width: 100%; border: 1px solid black; …
5
Comment faire en sorte qu'un élément <svg> se développe ou se contracte avec son conteneur parent?
Le but est que l' &lt;svg&gt;élément se développe jusqu'à la taille de son conteneur parent, dans ce cas a &lt;div&gt;, quelle que soit la taille de ce conteneur. Le code: &lt;style&gt; svg, #container{ height: 100%; width: 100%; } &lt;/style&gt; &lt;div id="container"&gt; &lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1" &gt; &lt;rect x="0" y="0" width="100" height="100" …
3
Écrans Retina, images d'arrière-plan haute résolution
Cela peut sembler une question idiote. Si j'utilise cet extrait CSS pour les affichages réguliers (Où box-bg.pngest 200px par 200px); .box{ background:url('images/box-bg.png') no-repeat top left; width:200px; height:200px } et si j'utilise une requête multimédia comme celle-ci pour cibler les écrans Retina (avec l'image @ 2x étant la version haute résolution); …
4
Élément de cache de bootstrap Twitter sur les petits appareils
J'ai ce code: &lt;footer class="row"&gt; &lt;nav class="col-sm-3"&gt; &lt;ul class="list-unstyled"&gt; &lt;li&gt;Text 1&lt;/li&gt; &lt;li&gt;Text 2&lt;/li&gt; &lt;li&gt;Text 3&lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt; &lt;nav class="col-sm-3"&gt; &lt;ul class="list-unstyled"&gt; &lt;li&gt;Text 4&lt;/li&gt; &lt;li&gt;Text 5&lt;/li&gt; &lt;li&gt;Text 6&lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt; &lt;nav class="col-sm-3"&gt; &lt;ul class="list-unstyled"&gt; &lt;li&gt;Text 7&lt;/li&gt; &lt;li&gt;Text 8&lt;/li&gt; &lt;li&gt;Text 9&lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt; &lt;nav class="col-sm-3"&gt; &lt;ul class="list-unstyled"&gt; &lt;li&gt;Text 10&lt;/li&gt; &lt;li&gt;Text 11&lt;/li&gt; &lt;li&gt;Text …
3
Forme avec un côté incliné (réactif)
J'essaie de créer une forme comme dans l'image ci-dessous avec un bord incliné d' un seul côté (par exemple, le côté inférieur) tandis que les autres bords restent droits. J'ai essayé d'utiliser la méthode border (le code est donné ci-dessous) mais les dimensions de ma forme sont dynamiques et je …
12
Bootstrap - Suppression du rembourrage ou de la marge lorsque la taille de l'écran est plus petite
EDITED: Peut - être devrais-je demander quel sélecteur configure le rembourrage latéral lorsque l'écran est réduit à une largeur inférieure à 480px? J'ai parcouru bootstrap-responsiveness.css pendant un certain temps pour localiser cela, mais rien ne semble affecter cela. Original Je souhaite essentiellement supprimer tout remplissage par défaut ou jeu de …
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.