Domande taggate «responsive-design»

Responsive Web Design (RWD) è un approccio alla progettazione e allo sviluppo Web che mira a creare siti per fornire esperienze ottimali su un'ampia gamma di dispositivi in ​​base alle dimensioni dello schermo, alla piattaforma e all'orientamento.

10
Allinea verticalmente un'immagine all'interno di un div con altezza reattiva
Ho il seguente codice che imposta un contenitore che ha un'altezza che cambia con la larghezza quando il browser viene ridimensionato (per mantenere le proporzioni quadrate). 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; } .dummy …
11
Query multimediale CSS per iPhone 5
L'iPhone 5 ha uno schermo più lungo e non cattura la visualizzazione mobile del mio sito Web. Quali sono le nuove query di progettazione reattiva per iPhone 5 e posso combinare con le query iPhone esistenti? La mia attuale query multimediale è questa: @media only screen and (max-device-width: 480px) {}
5
Come far espandere o contrarre un elemento <svg> nel suo contenitore principale?
L'obiettivo è che l' &lt;svg&gt;elemento si espanda alla dimensione del suo contenitore genitore, in questo caso a &lt;div&gt;, non importa quanto grande o piccolo possa essere quel contenitore. Il codice: &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" …
8
Come ottenere solo la griglia reattiva da Bootstrap 3?
Devo aggiungere funzionalità di responsive design alla mia applicazione web utilizzando Twitter Bootstrap. Voglio solo un comportamento reattivo, non sono interessato alla tipografia, ai componenti o ad altre cose incluse in Bootstrap. Ho ottenuto una versione Bootstrap personalizzata semplicemente selezionando il sistema a griglia. Tuttavia, quando aggiungo il CSS generato …
3
Display Retina, immagini di sfondo ad alta risoluzione
Questa potrebbe suonare come una domanda stupida. Se utilizzo questo frammento CSS per i display normali (dove box-bg.pngè 200px per 200px); .box{ background:url('images/box-bg.png') no-repeat top left; width:200px; height:200px } e se utilizzo una media query come questa per indirizzare i display retina (con l'immagine @ 2x che è la versione …
4
Elemento nascondi bootstrap Twitter su piccoli dispositivi
Ho questo codice: &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
Riga bootstrap con colonne di diversa altezza
Al momento ho qualcosa come: &lt;div class="row"&gt; &lt;div class="col-md-4"&gt;Content&lt;/div&gt; &lt;div class="col-md-4"&gt;Content&lt;/div&gt; &lt;div class="col-md-4"&gt;Content&lt;/div&gt; &lt;div class="col-md-4"&gt;Content&lt;/div&gt; &lt;div class="col-md-4"&gt;Content&lt;/div&gt; &lt;div class="col-md-4"&gt;Content&lt;/div&gt; &lt;div class="col-md-4"&gt;Content&lt;/div&gt; &lt;div class="col-md-4"&gt;Content&lt;/div&gt; &lt;div class="col-md-4"&gt;Content&lt;/div&gt; &lt;/div&gt; Ora supponendo che, content fossero scatole di diversa altezza, con la stessa larghezza - come potrei mantenere lo stesso "layout basato su griglia" e …
3
Forma con un lato inclinato (reattivo)
Sto cercando di creare una forma come nell'immagine qui sotto con un bordo inclinato su un solo lato (ad esempio, il lato inferiore) mentre gli altri bordi rimangono diritti. Ho provato a utilizzare il metodo del bordo (il codice è fornito di seguito) ma le dimensioni della mia forma sono …
12
Bootstrap - Rimozione della spaziatura interna o del margine quando le dimensioni dello schermo sono inferiori
MODIFICATO: Forse dovrei chiedere quale selettore imposta il riempimento laterale quando lo schermo è ridotto a una larghezza inferiore a 480px? Ho esplorato bootstrap-responsiveness.css per un po 'per individuarlo, ma nulla sembra influenzarlo. Originale Fondamentalmente voglio rimuovere qualsiasi riempimento predefinito o set di margini per la reattività sugli schermi dei …
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.