Adaptiv ist eine Reihe von Vorlagen, die sich an alle Endgeräte anpassen, aber das auf jedem Gerät angezeigte Layout ist das gleiche, was allgemein als breitenadaptiv bekannt ist.
Eine Reihe responsiver Vorlagen passt sich an alle Endgeräte an, das Layout, das jedes Gerät sieht, kann jedoch unterschiedlich sein.
Obwohl responsives/adaptives Webdesign die Nachteile der Kompatibilität mit verschiedenen Geräten, hoher Arbeitsbelastung, umständlichen Codes und langer Ladezeiten mit sich bringt, sind sie plattform- und terminalübergreifend, können einmal entworfen werden, sind universell einsetzbar und können entsprechend angepasst werden Die Anpassung an die Bildschirmauflösung, das automatische Zoomen von Bildern und die automatische Anpassung des Layouts sind nicht nur technische Umsetzungen, sondern auch eine neue Art, über Design nachzudenken.
Die Lösung für viele Websites besteht darin, unterschiedliche Webseiten für unterschiedliche Geräte bereitzustellen, beispielsweise die Bereitstellung einer speziellen mobilen Version oder einer iPhone/iPad-Version. Dies stellt zwar den Effekt sicher, ist jedoch aufwändiger und erfordert die gleichzeitige Pflege mehrerer Versionen. Wenn eine Website außerdem über mehrere Portale verfügt, erhöht sich die Komplexität des Architekturdesigns erheblich.
Die Anpassung stellt immer noch ein Problem dar, auch wenn die Webseite an die Bildschirmgröße angepasst werden kann. Bei der Anzeige auf einem kleinen Bildschirm wird der Eindruck entstehen, dass der Inhalt zu voll ist. Reaktionsfähigkeit ist ein Konzept, um dieses Problem zu lösen Problem. Es kann die Bildschirmbreite automatisch erkennen und das Webdesign entsprechend anpassen. Das Layout und der angezeigte Inhalt können sich ändern.
Adaptive Erfahrung http://m.ctrip.com/html5/ Responsive Erfahrung http://segmentfault.com/
CSS Secret Garden http://www.csszengarden.com/
http://caibaojian.com/demo/ued/
2. Grundkenntnisse der Reaktionsfähigkeit 1. Meta-Tag festlegen<meta name=viewport content=width=device-width, initial-scale=1.0, Maximum-scale=1.0, user-scalable=no>
Erläuterung mehrerer Parameter dieses Codes:
§width = Gerätebreite: Breite entspricht der Breite des aktuellen Geräts
§initial-scale: anfängliche Skalierung (Standardeinstellung ist 1,0)
§minimum-scale: Der minimale Maßstab, auf den der Benutzer zoomen darf (Standard ist 1,0)
§maximum-scale: Der maximale Maßstab, auf den der Benutzer zoomen darf (Standardeinstellung ist 1,0).
§Benutzerskalierbar: ob der Benutzer manuell zoomen kann (Standard ist „Nein“, da wir nicht möchten, dass Benutzer die Seite vergrößern und verkleinern)
2. Medienabfrage CSS3-Medienabfrage ist ein Schlüsselfaktor bei der Umsetzung von responsivem Design. Mit der Medienabfragefunktion können Sie festlegen, dass die Seite je nach Breite des Geräts unterschiedliche CSS-Blöcke verwendet.
Die folgenden CSS-Regeln werden wirksam, wenn die Bildschirmbreite kleiner oder gleich 980 ist:
@media (orientierung:portrait) und (max-width:460px) { .video .innerBox .news a.more { display: none; } .video .innerBox .news span { display: none } .video .innerBox .news { width: 100 % } .video .innerBox .news ul { width: 100 %; }}Ausrichtung: Hochformat | Querformat
Porträt:
Gibt an, dass die Höhe des sichtbaren Bereichs der Seite im angegebenen Ausgabegerät größer oder gleich der Breite ist
Landschaft:
Mit Ausnahme des Porträtwerts sind sie alle im Querformat
Wählen Sie „CSS laden“, um die Datei „smallScreen.css“ zu laden, wenn die Bildschirmbreite zwischen 400 Pixel und 600 Pixel liegt.
<link rel=stylesheet type=text/cssmedia=screen und (min-width: 400px) und (max-device-width: 600px) href=smallScreen.css />
3. Prozent-Layout
3. Responsives Seitendesign, Schriftarten und Bildverarbeitung1. Designprozess einer auf HTML5/CSS3 reagierenden Seite
Schritt 1: Bestimmen Sie den Gerätetyp und die Bildschirmgröße, die kompatibel sein müssen: einschließlich mobiler Geräte (Mobiltelefone, Tablets) und PCs. Achten Sie bei der Gestaltung und Implementierung mobiler Geräte auf das Hinzufügen von Gestenfunktionen.
Bildschirmgröße: einschließlich verschiedener Mobiltelefon-Bildschirmgrößen (einschließlich horizontal und vertikal), verschiedener Tablet-Größen (einschließlich horizontal und vertikal), gewöhnlicher Computerbildschirme und Breitbildschirme.
Schritt 2: Erstellen Sie verschiedene Wireframe-Prototypen für die festgelegten Größen. Sie müssen berücksichtigen, wie sich das Layout der Seite bei verschiedenen Größen ändert, wie die Inhaltsgröße skaliert wird, wie Funktionen und Inhalte gelöscht werden und wie in speziellen Umgebungen gearbeitet wird. Spezialdesign usw. Dieser Prozess erfordert eine enge Kommunikation zwischen Designern und Front-End-Entwicklern.
Schritt 3: Visuelles Design. Importieren Sie die Bilder für einige einfache Tests auf das entsprechende Gerät. Dies kann uns helfen, Probleme in Bezug auf Zugänglichkeit, Lesbarkeit usw. so früh wie möglich zu erkennen.
Im Vergleich zur herkömmlichen Webentwicklung gibt es bei responsiven Designseiten Änderungen im Seitenlayout und in der Inhaltsgröße, sodass die endgültige Ausgabe wahrscheinlich stark vom Designentwurf abweicht, was mehr Kommunikation zwischen Front-End-Entwicklern und Designern erfordert.
2. Responsive Schriftarten
Vergleich zwischen mehreren verschiedenen Einheiten in CSS
px: Pixel. Relative Längeneinheit, die Größe wird durch die Bildschirmauflösung bestimmt. (Zusammenarbeit bei Medienanfragen)
em: relative Längeneinheit. Entspricht der Schriftgröße des Texts im aktuellen Objekt oder relativ zur Standardschriftgröße des Browsers, wenn die aktuelle Schriftgröße für Inline-Text nicht festgelegt ist. Der Wert von em ist nicht festgelegt, er erbt die Schriftgröße des übergeordneten Elements. Alle unveränderten Browser entsprechen: 1em=16px. Dann 12px=0,75em, 10px=0,625em. Um die Konvertierung der Schriftgröße zu vereinfachen, müssen Sie im Body-Selektor in CSS Font-size=62,5 % deklarieren, wodurch der em-Wert 16px*62,5%=10px wird, also 12px=1,2em, 10px=1em , auch Das heißt, Sie müssen nur Ihren ursprünglichen px-Wert durch 10 teilen und dann zu em als Einheit wechseln.
rem: eine neue relative Einheit in CSS3. Der Hauptunterschied zu em besteht darin, dass es sich bei der Verwendung von rem zum Festlegen der Schriftgröße für ein Element immer noch um eine relative Größe handelt, diese jedoch nur relativ zum HTML-Stammelement. Man kann sagen, dass diese Einheit die Vorteile der relativen Größe und der absoluten Größe kombiniert. Dadurch können Sie alle Schriftgrößen proportional anpassen, indem Sie nur das Stammelement ändern, und Sie können die Kettenreaktion der zusammengesetzten Schriftgrößen Schicht für Schicht vermeiden. Derzeit unterstützen alle Browser außer IE8 und früher rem. Für Browser, die dies nicht unterstützen, ist die Lösung sehr einfach: Schreiben einer zusätzlichen absoluten Einheitenanweisung. Diese Browser ignorieren mit rem festgelegte Schriftgrößen.
%: Darüber hinaus können wir auch den Prozentsatz verwenden, um die Größe anzugeben, die das Vielfache der aktuellen Schriftart im Verhältnis zur Standardschriftgröße des Browsers darstellt. Diese Einheit wird auch häufig im Page Responsive Design verwendet.
html{font-size:62.5%;/* 10÷16=62.5% */}body{font-size:12px;font-size:1.2rem;/* 12÷10=1.2 */}p{font-size :14px;font-size:1.4rem;}Es ist zu beachten, dass wir zur Kompatibilität mit Browsern, die rem nicht unterstützen, den entsprechenden px-Wert vor rem schreiben müssen, damit Browser, die es nicht unterstützen, ordnungsgemäß heruntergestuft werden können. Tatsächlich müssen Sie sich nicht allzu viele Gedanken darüber machen, ob Sie die Standardschriftgröße: 100 % verwenden oder auf Schriftgröße: 62,5 % festlegen möchten. Wenn Sie ein CSS-Vorverarbeitungstool einführen, können Sie natürlich den Standardwert verwenden Wenn Sie aus anderen Gründen die Schriftgröße „62,5 %“ verwenden, ist daran nichts auszusetzen. Sie können die Schriftgröße auf die Standardschriftgröße zurücksetzen, die Sie im Hauptteil benötigen.
3. Responsive Bild- und Videoverarbeitung
http://alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html#
1. Hintergrundbild ---- Medienabfrage
2. Bildverflüssigung ----elastisches Bild
img, Objekt { max-width: 100 %;}https://www.filamentgroup.com/examples/responsive-images/3.HTML5 <picture>-Element
Das <picture>-Element von HTML5 kann mehrere Bilder festlegen.
Browserunterstützung
<picture> <source srcset=images/img_smallflower.jpg media=(max-width: 400px)> <source srcset=images/img_flowers.jpg> <img src=images/img_flowers.jpg style="margin: 0px; padding: 0px; Umriss: keine; Zeilenhöhe: 25,2px; Schriftgröße: 14px; Breite: versteckt; Schriftfamilie: tahoma, arial, Microsoft YaHei;<script src=http://cdn.gbtags.com/picturefill/2.0.0/picturefill.min.js></script>4. Verwenden Sie Noscript-Tags, um responsive Bilder zu erstellen
Js dynamisches Laden großer und kleiner Bilder
<span class=img-placeholder></span><noscript data-mobilesrc=small.jpg data-fullsrc=big.jpg data-alttext=your alt text class=responsivize> <img src=big.jpg></noscript > <script type=text/javascript>var responsiveImageTag = { replacementInitialImages:function(respons) { var platform = desktop var resImage = '.'+respons; var responsiveImages = $(resImage); var i, noOfresponsiveImages = responsiveImages.length; //Aktueller Anzeigegerätebreitentest if(screen.width <= 767){ //767px, kleiner als ipad Sie alle denken, es ist mobil platform = mobile; } //Setze das anfängliche Quellelement auf das Bild for(i = 0; i < noOfresponsiveImages; i = i + 1 ){ var noScriptElem = $(responsiveImages[i]); var img = window.document.createElement(img); if(platform == = mobile){ img.src = noScriptElem.attr(data-mobilesrc)}else{ img.src = noScriptElem.attr(data-fullsrc); } img.className = responsive; ); } }};responsiveImageTag.replaceInitialImages('responsivize');$(window).resize(function(){ responsiveImageTag.replaceInitialImages('responsivize');});</script>4. Responsives FrameworkAnpassung: Wenn Ihre Website über eine große Anzahl unterschiedlicher Designs verfügt und Sie trotzdem Bootstrap verwenden möchten, müssen Sie das Framework als unterste Ebene ändern: Es müssen viele Stile kopiert werden, und die CSS-Hierarchie ist verwirrend und schwer zu pflegen.
In manchen Situationen ist Bootstrap sehr nützlich. Wenn Sie beispielsweise schnell eine relativ schöne persönliche Website, eine Unternehmenswebsite, eine Blog-Backend-Verwaltungsschnittstelle und andere Projekte erstellen möchten, die keine hohe Seitenanpassung erfordern, sind sie häufig besser für Backend-Projekte geeignet Konzessionsstile und es ist nicht einfach, ins Detail zu gehen. Oder Sie sind möglicherweise unerfahren in der Erstellung eines Website-Frontends, wenn man bedenkt, dass Bootstrap viele Probleme für Sie lösen wird.