Tag: responsive-design
Responsive Web Design (RWD) ist ein Ansatz, um Web-design und-Entwicklung zielt auf crafting Websites, um einen optimalen Erfahrungen in einem breiten Spektrum von Geräten basierend auf Bildschirmgröße, Plattform und Ausrichtung.
Wie, um sicherzustellen, dass eine website füllt den gesamten viewport? (desktop, mobile, ipad, etc.)
3 Antworten
Wir haben derzeit eine website, die nicht von Flüssigkeit/flexibel (wie es ändert sich nicht das layout abhängig von der viewport-Größe). Wenn es auf dem desktop angezeigt, füllt es den gesamten Bildschirm (und zentriert ausgerichtet). Aber Problem entsteht,
Responsive CSS-Bild-Anker-tags - Image-Maps-Stil
2 Antworten
Habe ich gearbeitet, auf eine responsive Website und habe ein bisschen ein problem mit Image Maps. Es scheint, dass Image-Maps funktionieren nicht mit Prozentsatz koordiniert. Nach ein bisschen googeln fand ich eine JS-workaround - http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html. Aber ich
Vertikal center responsive iframe
1 Antworten
Ich bin mit der Technik hier beschrieben um einen iframe (video) reagiert. Im wesentlichen der iframe ist absolut positioniert in einem wrapper-element mit 100% Breite. Die wrapper-element hat padding set, basierend auf dem Seitenverhältnis des Videos: .embed-responsive
Bootstrap-Karten/thumbnails nicht Schlange Seite an Seite richtig in das grid-system & Karten-deck
2 Antworten
Ich habe ein problem mit dem bekommen von Boostrap ' s miniaturen & Karten line up Seite an Seite in Ihren grid-system. Im Grunde ist dies eine Zuordnung & ich habe zu Folgen, bestimmte Parameter: -muss die
Element mit fester position im responsive layout
2 Antworten
Arbeite ich an einem responsive layout, und ich würde gerne ein widget zu bleiben fest/klebrig, was bedeutet, es werde Ihnen Folgen, wie Sie nach unten scrollen die Seite. Vereinfachte HTML: <div class="page"> <div class="content"></div> <div class="sidebar"> <div
Wie zum ausblenden von div, wenn der browser in der Größe verändert?
3 Antworten
Es ist schwer zu sagen, was hier gefragt. Diese Frage ist mehrdeutig, unklar, unvollständig, zu breit, oder der rhetorischen und nicht sinnvoll zu beantworten, die in seiner aktuellen form. Für Hilfe bei der Klärung dieser Frage, so
Warum ist mein Android-device-width 980px?
3 Antworten
Ich bin verwirrt. Ich bin versucht, eine website zu machen reaktionsschnell Weg durch das Spiel mit media queries. laut den meisten Quellen, zum Beispiel diese, das mediq-Abfrage für smartphones ist max-device-width: 480px und min-device-width: 320px. Aber wenn
Breite für E-Mail-Newsletter
2 Antworten
Ich weiß, die standard-Breite für E-Mail-marketing-Newsletter ist 600px. Ich weiß, die Leute haben angefangen, um code responsive E-Mails und Sie funktionieren Super, jedoch habe ich bemerkt, dass die standard-Breite ist noch immer 600px, auch wenn es responsive
CSS3 Animieren layout ändern für floating divs
2 Antworten
Als Sie die Fenstergröße ändern, die floatenden divs wird auf die nächste Zeile umbrochen, wie erwartet. Aber ich würde wirklich gerne dieses layout ändern, um animiert werden. EDIT: nebenbei, es wäre schön, eine Lösung zu finden, das
Wie kann ich eine CSS-Grenze auf einer Diagonale element
2 Antworten
Hier ist ein Beispiel. http://jsfiddle.net/52c7t/ Einfach: ich versuche, das div-Element auf der rechten Seite, um einen Rahmen haben, wie das div-Element auf der linken Seite. (Ich will die Grenze auf der linken Seite des rechten div) Ich
Ein fester hintergrund-Bild mit text (und auch ansprechbar)
1 Antworten
Ich habe versucht, etwas herauszufinden, aber kein Glück. Ich habe auch schon die Suche im internet nach möglichen Lösungen, aber wieder kein Glück. Sagen wir mal ich wollte ein Bild mit text zu bleiben, fest in den
CSS responsive design mobile funktioniert nicht auf uc browser und opera mini
2 Antworten
Responsive website auf der UC-und Opern-min-browser funktioniert nicht richtig(wir verwendeten media query für "responsive design"). ich suchte herum, fand ich einige links: css responsive design mobile funktioniert nicht responsive website-design funktioniert nicht auf dem Handy aber keinen
HTML-CSS - Logout-button im rechten Teil der Navigationsleiste
1 Antworten
Was ich getan habe, ist ich gelegt   eine Menge Zeit, aber wenn Sie ändern die Größe des Fensters, den logout-button nicht bleiben.Wie machen Sie den logout-button bleiben Sie im rechten Teil der Navigationsleiste neben der Verwendung
Scrollbare Inhalte innerhalb einer festen position container
1 Antworten
Ich habe ein Bootstrap gebaut website, die enthält ein overlay-footer, die sich öffnen, bei Klick auf die Fußzeile Menü. In diesem Fußzeile einer scrollbaren content-Bereich und die funktioniert korrekt, wenn eine Feste Höhe eingestellt ist, auf das
Passen Bild bootstrap navbar Höhe effizient
2 Antworten
Ich würde gerne wissen, wie ein Bild zu machen, passen bootstrap navbar Höhe (anteilig), hier ist eine beschreibende Bild: Irgendeine Idee? Ich bin mit dieser Struktur: <nav class="navbar navbar-default"> <divclass="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#"> <img alt="Brand"
Responsive Tabelle mit gleicher Breite und Höhe TDs
2 Antworten
Wie erstelle ich eine responsive HTML-Tabelle, die jede Zelle/TD hat die gleiche Breite und Höhe? Also, wenn ich die Größe des browser-Fensters oder die Größe der Tabelle im container in der Tabelle wird die Größe, aber jede
Spalte Bestellen in Bootstrap3 nicht wie erwartet funktioniert
2 Antworten
War ich dabei einige Experimente mit der Spalte bestellen in Bootstrap 3 und stieß auf dieses problem. Wie kann ich das erreichen der folgenden Reihenfolge: XS: 123 SM: 231 MD: 312 LG: 123 Dies ist, was ich
Responsive Bild innerhalb eines div
2 Antworten
Gut, ich habe eine div mit 50% width und 200px Höhe, es ist ein Bild in diesem div-Element, dass ich es machen will, reagieren auf die Auflösung. wenn ich dieses Bild auf div-hintergrund-Bild und geben Sie es
Wie zu tun, Outlook HTML E-Mail Signatur mobile-friendly?
1 Antworten
Habe ich outlook HTML-Signatur und es ist gut Aussehen und gut funktionieren, aber auf Handy ist es hübsch Aussehen große. Wenn es möglich meine Signatur reagieren? Mein HTML-code: <html> <head> <title>Signature</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body
Responsive Karussell mit Cycle2
2 Antworten
Arbeite ich auf einem Karussell, mit dem cycle2 und cycle2-Karussell plugins. Gefunden Lösung hier zu display-variable Anzahl von Elementen je nach Größe angepasst-Fenster-Breite. Problem ist das Karussell bricht wegen einer anderen Diashow. Alles funktioniert bis auf die
Responsive clip-path mit inline-SVG
1 Antworten
Auf ein element mit einem hintergrund (Bild oder Farbe nicht wirklich wichtig): <header id="block-header"></header> Ich bin versucht, einen clip-Pfad unter Verwendung der SVG. Um dies zu erreichen, ich bin putting SVG inline in das gleiche element wie
Google Web-Fonts nicht laden in Chrome für iOS
7 Antworten
Verwenden, wenn ich Google Webfonts, Sie laden problemlos auf jedem browser, die ich zu kümmern, AUßER Chrome/iOS. Dies scheint seltsam, wie es funktioniert gut in Chrome für Mac und Safari für iOS, also ich glaube nicht, dass
Schaffung eines ansprechenden Teiler (vertikal/horizontal) in der Bootstrap
5 Antworten
Bin ich kämpfen ein bisschen mit der Erstellung eines responsive-Teiler in der Bootstrap. Durch responsive-Teiler meine ich eine Trennlinie, die senkrecht auf großen Bildschirmen und horizontal auf kleineren Bildschirmen. Vertikale Teiler: Horizontale divider: Danke für das hinzufügen
Bild drehen je nach Bildschirm-Größe
2 Antworten
Ich versuche herauszufinden, wie dreht man ein Bild in ein div-je nach Bildschirmgröße. Grundsätzlich gibt es dieses set bis: <div> <div with arrow pointing right > <div> in einem fluid Zeile (bootstrap) und ich muss den Pfeil
Verpackung div-Element nicht geändert werden, wenn innere Bild skaliert (Ergebnis von Fenster-resize)
9 Antworten
Möchte ich meine Bilder auf die Größe wie das Fenster Höhe ändert, während die mit div schrumpfen das Bild. Ich habe versucht mit: <div> <img src="http://akamaicovers.oreilly.com/images/9780596806767/cat.gif" alt=""> </div> html, body { height: 100%; width: 100%; } div
responsive jquery image resizer
1 Antworten
Habe ich folgenden code für ein Bild in der Größe von max Breite und das gleiche gilt für die Höhe über .height(). Das problem ist immer noch, dass ich nicht finden können, eine gut ansprechende Bild-neu-Größe-plugin oder
Warum ist Bootstrap schieben Letzte Spalte auf der nächsten Zeile
1 Antworten
Habe ich den folgenden HTML - <div class="container"> <div class="row"> some content here </div> <div class="row"> <div class="col-xs-12"> <div class="row"> <div class="col-xs-1"></div> <div class="col-xs-4 col-md-2">17:00-18:00</div> <div class="col-xs-7 col-md-9"> <a href="#">Some looooooooooooooooooooooooooooooooooong Text goes here</a> </div> </div> <!--
Deaktivieren der Lightbox im responsive design
4 Antworten
Ich gesucht habe die vorherigen Beiträge SO in Bezug auf jQuery und responsive design, hatte aber kein Glück bei der Suche etwas ähnliches. Mein Problem ist, ich habe eine website, die, wenn Sie trifft, > 960px es
Zurb Foundation 4 SCSS Mixins in Verbindung für kleine und große(fluid/responsive) - Spalten
5 Antworten
Bin ich, eine Firma aufzubauen responsive website und mit beiden SASS und Foundation 4 CSS-Framework für die erste Zeit. So weit So gut. Aber ich habe da ein "problem" hier mit Mixins in Verbindung. Wenn ich eine
Schriftgrößen für responsive design
2 Antworten
Was ist eine sinnvolle Strategie für die Größe der schriftart in verschiedenen viewport-Größen? Ich sehe drei mögliche Optionen: Verkleinern der Schriftgröße als viewport-Größe verringert. Identische Schriftgröße für alle viewport-Größen. Erhöhen Sie die Schriftgröße in den viewport-Größe verringert.
Wie zu erkennen, zwischen Handy & tablets in PHP
3 Antworten
Lese ich auf diesen thread: Einfachste Möglichkeit zu erkennen, ein mobiles Gerät wie Sie wissen, wenn der browser eines mobilen Geräts. der general-code ist dieser: <?php include("Mobile_Detect.php"); include("demoData.php"); $detectIsMobile = new Mobile_Detect(); ?> Das problem ist, dass
Responsive scroll-in der Lage, tabbed navigation in CSS
1 Antworten
Ich bin auf der Suche zu implementieren, die nav-bar, wie unten gezeigt. es gibt zwei Versionen, die erste ist Vollbild und das zweite ist Mobil. Das Handy muss scrollen nach Links und rechts für die Tage der
Responsive bootstrap-sass-setup
1 Antworten
Ich versuche, bootstrap-sass (2.1.0.0) für eine effizient gestaltete Ruby on Rails 3.2.8-Website. Dies ist mein Erster Versuch in responsive design mit Schienen oder Bootstrap. Das problem ist, dass einige, aber nicht alle, meiner CSS-styles sind in übereinstimmung
Bootstrap-responsive navbar dropdown-reagiert nicht auf touch
1 Antworten
Ich bin mit Twitter Bootstrap 2.3.2 der Aufbau einer responsive Website. Ich habe eine Navigationsleiste mit dropdown-Menüs: <div class="nav-collapse collapse"> <ul class="nav"> <li {% if request.get_full_path = "/" %} class="active" {% endif %} ><a href="/">Home</a></li> <li id="fat-menu"
Einschränken von einem div-Breite auf die Breite der ein flüssiges Bild drin
3 Antworten
Abend-front-end-Assistenten. Ich bin versucht, etwas zu tun, das sollte Recht einfach: ich möchte Bilder schwebten rechts oder Links in meinem Körper Inhalt, mit einer Beschriftung unter jedem Bild. Um zu versuchen und erreichen das ich schweben ein
Wie man DIVS innerhalb div reaktionsschnell Weg
3 Antworten
Ich weiß, es gibt Millionen von ähnlichen Fragen auf dem zugehörigen Thema und ich habe gelesen, dass viele von Ihnen, aber irgendwie habe ich immer noch nicht wirklich, wie man div ' s oder andere Dinge, die
bedingt das laden von Bildern für responsive designs
5 Antworten
Ich bin Nachrüstung eines adaptiven Layouts auf eine vorhandene Website. Grundsätzlich ist bei 500 Pixel der Website wechselt zu einer 100% Breite mobile-Stil layout. Normalerweise hätte ich mit ems, aber als ich sagen, ich bin Nachrüstung. Ich
Responsive images: img srcset + Bootstrap, falsche Größe Bild geladen wird
1 Antworten
Ich bin mit Bootstrap mit ansprechenden Bildern. Ich möchte zur Optimierung der Ladezeiten durch eine Vielzahl von Bildgrößen Browser. Nach dieser Artikel, einen einfachen Ansatz mit srcset wie das ist gut für die Vermietung der browser-wählen Sie
Wie kann ich erkennen, serviert ad Abmessungen
4 Antworten
Ich bin derzeit mit google publisher-tags mit DFP zu dienen up-anzeigen, um eine Website, wird sehr bald reagieren. Wir haben ein ad-slot, die möglicherweise dienen die 2 möglichen breiten, 728 oder 960 und je nachdem, welche Breite
Mithilfe von jQueryMobile UND bootstrap zusammen
4 Antworten
Momentan bin ich am Aufbau einer web-app, und ich möchte das Gerät verwenden, jquerymobile für Auflösungen unter 780 Pixel und bootstrap für über 780 Pixel.. Ist das überhaupt möglich? Ich habe versucht, auf der Suche um und
Wie man neue Zurb Foundation-Unterstützung für IE 7+?
2 Antworten
Ich vor kurzem bauen einer responsive website. Ich benutze Zurb Foundation da einige Ratschläge und seine Artikel, die beste Lösung für responsive website effizienter. Aber das problem, die neue version von Stiftung keine Unterstützung für IE 7+,
Wie man 2 videos nebeneinander, zentriert und reaktionsschnell
2 Antworten
Ich versuche, fügen Sie 2 videos nebeneinander, die sind zentriert und beabstandet richtig, und dann wollen Sie reagieren mit dem zweiten video, das unten unter dem ersten video, so dass es angezeigt werden können gestapelt oder auf
bootstrap: vier span3-thumbnails im responsive span12
1 Antworten
Stapelten wir eine span12- in einem span8-container und habe versucht, indem Sie vier Miniaturansichten in einer Reihe. Leider sind die letzten <li> Pausen, um die nächste Zeile obwohl screensize würde erlauben, dass alle vier miniaturen passen in
bootstrap row-fluid-und grid-Bild
2 Antworten
Werde ich erstellen eine Bildergalerie Daumen. es könnte sein, 5-15 Daumen in die Seite. Mein markup wird dies: <div class="container> <div class="row-fluid"> <h4 class="underline"><span>Recent images</span></h4> <div id="portfolio" class="row-fluid"> <div class="span3"> <img src="img/portfolio/1.jpg"> </div> <div class="span3"> <img src="img/portfolio/2.jpg">
Ein fluid adaptive ungeordnete horizontale Liste
1 Antworten
Frage ich mich, ob es eine Lösung für dieses: (möglicherweise nicht, aber man weiß ja nie!) Angenommen, wir haben eine ul-Liste wie diese: <ul class="nav"> <li><a href="/">Home</a></li> <li><a href="/">What we do</a></li> <li><a href="/">Human resources</a></li> <li><a href="/">How we
UPDATE: Responsive images in AngularJS
2 Antworten
Original-Ausgabe für die Nachwelt (siehe updates) Habe ich eine Angular.js website ich Baue mir aus zu reagieren. Ich wollte getrennte Auflösung für verschiedene browser-breiten sowie. So, ich stolperte über Picturefill.js, die scheint, wie es perfekt funktionieren würde.
Bootstrap responsive css und/oder viewport-Problem/bug bei rotation des Geräts
2 Antworten
Habe ich momentan noch ein problem in meiner website http://www.peterfox.me, Wann immer Sie es betrachten, es mit einem mobilen Gerät (iPhone, Nexus 4) drehen Sie den Bildschirm scheint zu Schrauben, bis die Größe der Körper/html, ist das
Ist es möglich, wählen Sie die Stapelreihenfolge von überspannt?
1 Antworten
Bin ich ein Projekt starten mit Twitter Bootstrap, und ganz wie die responsive css, so dass die Spannweiten stack auf der jeweils anderen, wenn der viewport kleiner wird. Gegeben, das folgende design: http://jsfiddle.net/kJp6J/1/ Ist es möglich zu
- Optimierte web-Bild Auflösung für das iPad Pro display
1 Antworten
Ich erstelle ein header-Bild (volle Bildschirmbreite) für eine responsive website. Was ist die optimale Auflösung, die noch gut auf den 12,9" iPad Pro? Mein normaler workflow ist das erstellen eines Bildes bei 72 PPI in Photoshop. Die
der Umgang mit hover-Effekt auf touch-Geräte
2 Antworten
habe ich folgenden code <div> <img src="http://placehold.it/350x150"/> <div class="link-cont"><a href="#">click here to see more info</a></div> </div> div { width: 350px; font-size:12px; position: relative; } div img{ padding:0 10px; } .link-cont { background: red; position: absolute; bottom: 0;