Als «responsive-design» getaggte Fragen

Responsive Web Design (RWD) ist ein Ansatz für Webdesign und -entwicklung, der darauf abzielt, Websites so zu gestalten, dass sie auf einer Vielzahl von Geräten basierend auf Bildschirmgröße, Plattform und Ausrichtung optimale Erlebnisse bieten.

4
Die reaktionsschnelle Website wurde auf Mobilgeräten auf die volle Breite verkleinert
Ich teste die Navigationsleiste für die Bootstrap-Reaktionsfähigkeit und habe eine Demo- Website. Wenn ich die Größe des Browsers auf einem Desktop verändere, funktioniert alles einwandfrei, einschließlich der Navigationsleiste, die zum zusammenklappbaren Menü mit einem kleinen Symbol oben wird, auf das ich klicken kann, um weitere Menüschaltflächen anzuzeigen. Aber als ich …
10
Richten Sie ein Bild innerhalb eines Divs vertikal mit der ansprechenden Höhe aus
Ich habe den folgenden Code, der einen Container mit einer Höhe einrichtet, die sich mit der Breite ändert, wenn der Browser die Größe ändert (um ein quadratisches Seitenverhältnis beizubehalten). 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 …
11
iPhone 5 CSS-Medienabfrage
Das iPhone 5 hat einen längeren Bildschirm und erfasst nicht die mobile Ansicht meiner Website. Was sind die neuen Responsive Design-Abfragen für das iPhone 5 und kann ich sie mit vorhandenen iPhone-Abfragen kombinieren? Meine aktuelle Medienabfrage lautet: @media only screen and (max-device-width: 480px) {}
5
Wie kann ein <svg> -Element in seinem übergeordneten Container erweitert oder verkleinert werden?
Ziel ist es, das &lt;svg&gt;Element auf die Größe seines übergeordneten Containers zu erweitern, in diesem Fall a &lt;div&gt;, egal wie groß oder klein dieser Container sein mag. Der 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" /&gt; …
8
Wie bekomme ich nur das responsive Grid von Bootstrap 3?
Ich muss meiner Webanwendung mithilfe von Twitter Bootstrap reaktionsschnelle Designfunktionen hinzufügen. Ich möchte nur das Reaktionsverhalten, ich interessiere mich nicht für die Typografie, Komponenten oder andere Dinge, die in Bootstrap enthalten sind. Ich habe eine angepasste Bootstrap-Version erhalten, bei der nur das Rastersystem ausgewählt wurde. Wenn ich jedoch das generierte …
3
Retina-Displays, hochauflösende Hintergrundbilder
Das klingt vielleicht nach einer dummen Frage. Wenn ich dieses CSS-Snippet für normale Anzeigen verwende (wobei box-bg.png200 x 200 Pixel groß sind); .box{ background:url('images/box-bg.png') no-repeat top left; width:200px; height:200px } und wenn ich eine Medienabfrage wie diese verwende, um auf Retina-Displays abzuzielen (wobei das @ 2x-Bild die hochauflösende Version ist); …
4
Twitter Bootstrap Hide Element auf kleinen Geräten
Ich habe diesen 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; …
3
Form mit einer schrägen Seite (ansprechend)
Ich versuche, eine Form wie im Bild unten mit einer schrägen Kante auf nur einer Seite (z. B. der Unterseite) zu erstellen , während die anderen Kanten gerade bleiben. Ich habe versucht, die Rahmenmethode zu verwenden (Code ist unten angegeben), aber die Abmessungen meiner Form sind dynamisch und daher kann …
3
Bootstrap-Zeile mit Spalten unterschiedlicher Höhe
Ich habe derzeit so etwas wie: &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; Angenommen, contentes handelte sich um Boxen unterschiedlicher Höhe mit derselben Breite - wie könnte ich das gleiche "gitterbasierte Layout" beibehalten und dennoch alle …
11
Bootstrap - Entfernen von Polstern oder Rändern, wenn die Bildschirmgröße kleiner ist
EDITED: Vielleicht sollte ich fragen, welcher Selektor die Seitenpolsterung einrichtet, wenn der Bildschirm auf unter 480px Breite reduziert wird? Ich habe eine Weile in bootstrap-responsiveness.css gesucht, um dies zu finden, aber nichts scheint dies zu beeinflussen. Original Ich möchte grundsätzlich alle Standardauffüllungen oder Ränder entfernen, die für die Reaktionsfähigkeit auf …
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.