Eine schnelle Lösung für das Problem der PC- und Mobilanpassung

Eine schnelle Lösung für das Problem der PC- und Mobilanpassung

Beim Erstellen einer Webseite müssen wir normalerweise Aspekte wie unterschiedliche Computerbildschirmgrößen und unterschiedliche Bildschirmgrößen von Mobiltelefonen berücksichtigen und das Problem von Stiländerungen lösen. Wie lösen wir also dieses Problem? Derzeit verwenden wir hauptsächlich Anpassungen, um die Probleme der Höhen-, Breiten- und Bildanpassung zu lösen. Lassen Sie uns dies auf PCs und Mobilgeräten zusammenfassen. Wenn eine Anpassung der Höhe und Breite durchgeführt wird, beziehen sich Bilder im Allgemeinen auf das Layout der Seite.

1. Die Mindestauflösung beträgt 1024 x 768 (herkömmlicher 17-Zoll-Monitor). Als Mindestbreite können dann 940 Pixel, 960 Pixel oder die häufig verwendeten 980 Pixel verwendet werden.

2. Die nächstgrößere Auflösung nach 1024*768 ist 1280*768, daher können Sie 1200px oder 1220px als größere Webseitenbreite verwenden

3. Fortgeschrittene Browser, die CSS3 und HTML5 unterstützen, können CSS3-Medienabfragen verwenden, um Webseiten die automatische Anpassung von Layout-Tags an unterschiedliche Auflösungen zu ermöglichen.

4. Bei Browsern, die CSS3 und HTML5 nicht unterstützen, insbesondere bei denen der Serie <= IE8, müssen Sie JS und Größenänderungsereignisse verwenden, um die Breite der HTML-Layout-Tags zu steuern.

5. Die Breitenanpassung erfordert die Berechnung unterschiedlicher Breiten für jedes Anzeigemodul, was beim Erstellen des HTML-Layouts einen hohen Berechnungs- und Anpassungsaufwand erfordert.

6. Breitenanpassung Häufig verwendetes CSS beim Schreiben von Layoutelementen für Anzeigen mit unterschiedlicher Breite

Sehen wir uns als Nächstes an, wie Sie mit JS und CSS die Anpassung an die Bildschirmgröße vornehmen.

Eins: Verstehen Sie die Grundlagen von Höhe und Breite

Hier einige Bilder zur Veranschaulichung:

Die Höhe und Breite des sichtbaren Bereichs der Webseite betragen: document.body.clientHeight||document.body.clientWidth

Die Höhe und Breite des Hauptteilbereichs der Webseite betragen: document.body.scrollHeight||document.body.scrollWidth (einschließlich der Länge des Scrollrads)

Der obere linke Bereich der Webseite, der weggescrollt wird: document.body.scrollTop||document.body.scrollLeft

Zwei: CSS adaptive Höhe

1. Zweispaltiges Layout, links fest und rechts adaptiv

XML/HTML Code Inhalt in die Zwischenablage kopieren
  1. Methode 1:
  2. //html part
  3. < div   id = " links " > Links </div>   
  4. < div   id = " bodyText " > Textkörper </div>   
  5. //CSS-Teil
  6. *{margin:0;padding:0}
  7. #left{float:left;width:200px;background:red;}
  8. #bodyText{margin-left:200px;background:yellow;
  9.   
  10. Methode 2:
  11. //html-Teil
  12. < div   id = " links " > Links </div>   
  13. < div   id = "Körper" >   
  14.      < div   id = " bodyText " > Textkörper </div>   
  15. </div>​​   
  16. //css-Teil
  17. #left{float:left;width:200px;background:red;margin-right:-100%;}
  18. #body{width:100%;float:left;}
  19. #bodyText{margin-left:200px;background:yellow;}

2. Dreispaltiges Layout, feste Breite auf beiden Seiten, adaptive Breite in der Mitte

  1. Methode 1
zum Kopieren von XML/HTML-Codeinhalten in die Zwischenablage
:
  1. < div   id = "left" > Links </div> ----Beachten Sie, dass es sich auf die Position des div bezieht
  2. < div   id = " rechts " > rechts </div>   
  3. < div   id = " Mitte " > Mitte </div>   
  4. //CSS-Teil
  5. #left{width:200px;background:red;float:left;}
  6. #center{width:auto;background:blue;}
  7. #right{width:200px;background:yellow;float:right;}
  8.   
  9. Methode 2:
  10. HTML-Teil:
  11. < div   id = "Körper" >   
  12.      < div   id = " Mitte " > Mitte </div>   
  13. </div>​​   
  14. < div   id = " links " > Links </div>   
  15. < div   id = " rechts " > rechts </div>   
  16. CSS-Teil:
  17. #body{width:100%;float:left;} //Schweben und Breite: 100 % festlegen
  18. #body #center{background:red;margin-left:200px;margin-right:300px;} //So verwenden Sie margin-left:100 %
  19. #left{width:200px;background:yellow;margin-left:-100%;float:left}
  20. #right{width:300px;background:blue;margin-left:-300px;float:left}
  21. -----Wenn auf margin-left:-100 % festgelegt, wird es auf der linken Seite des Textkörpers ausgeführt.
  22. -----Wenn es auf margin-left:-300px (also die Breite rechts) eingestellt ist, läuft es auf der rechten Seite von Body

3. Bezüglich der Mindestbreite und der Maximalbreite

betrachten wir es dennoch in Verbindung mit dem Layout, wie etwa dem folgenden Code: adaptive Breite, wodurch das Layout geändert wird.

XML/HTML CodeKopieren Sie den Inhalt in die Zwischenablage
  1. //html part
  2. < div   id = "Behälter" >   
  3.      < div   Klasse = "eins" > </ div >   
  4.      < div   Klasse = "zwei" > </ div >   
  5.      < div   Klasse = "drei" > </ div >   
  6.   </div>​​   
  7.   
  8. //CSS-Teil
  9. #container{width:100%;}
  10. .one{width:20%;background:red；}
  11. .one,.two,.three{float:left; height:100px;}
  12. .two{width:60%;background:yellow;}
  13. .three{width:20%;background:blue;}
  14. @media (max-width:800px){--Wenn die Browserbreite weniger als 800px beträgt
  15. .one{width:40%;}
  16. .two{width:60%}
  17. .three{width:100%}
  18. }
  19. @media (max-width:400px)--Wenn die Browserbreite weniger als 400px beträgt
  20. {
  21. .one{width:100%}
  22. .two{width:100%}
  23. .three{width:100%}
  24.      
  25. }

Verstehen Sie, was Mindestbreite und Maximalbreite sind. Die Mindestbreite bezieht sich auf die für ein Element festgelegte Mindestbreite. Nach Erreichen der Mindestbreite hat das Skalieren des Textes keine Auswirkungen mehr

. Die Maximalbreite ist eine Obergrenze, die alle Elemente erreichen können und nicht weiter erhöht werden kann.

Drei: CSS handhabt die adaptive Höhe

XML/HTML CodeKopieren Sie den Inhalt in die Zwischenablage
  1. //html Teil des Codes
  2. < div   id = "passen" > </ div >   
  3. //CSS-Code
  4. HTML, Body {Rand: 0; Höhe: 100 %;}
  5. #fit {Breite: 200px; Hintergrund: gelb; Höhe: 100 %; Rahmen: 1px durchgehend rot;}
  6.   
  7. --Hier werden sowohl dem HTML als auch dem Textkörper Stile hinzugefügt, um die Kompatibilität mit den wichtigsten Browsern sicherzustellen.
  8. Wenn sich der IE im Promiscuous-Modus befindet, verwendet der Body das Fenster als Referenz für die Höhe. Wenn Sie den Body auf 100 % setzen, kann die Seite so hoch wie das Fenster sein. Die verschachtelten Divs im Body können auch auf die Fensterhöhe erweitert werden,
  9. sodass sich das Layout an die Größe des Browserfensters anpassen kann. Formular > Body > Div (HTML, Body {overflow:scroll} eine Ebene der Bildlaufleiste)
  10. Im Standardmodus verwendet Body jedoch das HTML-Tag als Referenz für die Höhe und das HTML-Tag verwendet das Fenster als Referenz. Body allein auf 100 % zu setzen, kann also nicht dazu führen, dass sein untergeordnetes Div 100 % des gesamten Bildschirms einnimmt.
  11. Sie müssen HTML auch auf 100 % setzen, damit HTML die Fenstergröße erhält. Form>html>body>div (html, body {overflow:scroll} zweistufige Bildlaufleiste, HTML-Bildlaufleiste wird nie verwendet)

übergeordnete Ebene ändert sich adaptiv mit der Höhe der untergeordneten Ebene und untergeordnete Ebene ändert sich mit der Höhe der übergeordneten Ebene

XML/HTML -CodeInhalt in die Zwischenablage kopieren
  1. < div   id = "fj" >   
  2. Ich bin ein Elternteil
  3.     < div   id = "zj1" > Ich bin Kind 1 </ div >   
  4.     < div   id = "zj2" > Ich bin Kind 2 </ div >   
  5. </div>​​   
  6. //css-Teil
  7. #fj{border:4px solid red;}
  8. #zj1{border:2px solid yellow;}
  9. #zj2{border:2px solid blue;}----In diesem Fall ändert sich die Höhe des übergeordneten Elements adaptiv mit der Höhe des untergeordneten Divs.

Wenn das untergeordnete Div das Float-Attribut verwendet, hat es den Standardfluss bereits verlassen und das übergeordnete Div ändert sich nicht mit der Höhe des Inhalts. Die Lösung besteht darin, ein leeres Div unter dem Floating-Div hinzuzufügen und das Clear-Attribut beide festzulegen.

XML/HTML -CodeInhalt in die Zwischenablage kopieren
  1. < div   id = "fj" >   
  2. Ich bin ein Elternteil
  3.     < div   id = "zj1" > Ich bin Kind 111111111111111111111111111 </ div >   
  4.     < div   id = "zj2" > Ich bin ein Kind 22222222222222222222222222222222222222222222222222222
  5. 22222222222222222222222222222 </ div >   
  6.     < div   id = "löschen"   style = "clear:both" > </ div > ------ Wenn dieser Satz entfernt wird, ändert sich die Höhe des übergeordneten Div nicht mit der Höhe des untergeordneten Div
  7. </div>​​   
  8. //css-Teil
  9. #fj{border:4px solid black;}
  10. #zj1{border:2px solid yellow;float:left}
  11. #zj2{border:2px solid blue;float:left}

Es gibt noch viele weitere Methoden zur Höhenanpassung, die hier nicht aufgeführt sind. Wie height:auto und so weiter.

Viertens: js behebt Probleme bei der Höhen- und Breitenanpassung

XML/HTML -CodeInhalt in die Zwischenablage kopieren
  1. < div   Ich würde sagen, "div1"   > 222222222222222222222 </ div >   
  2. //js-Teilfunktion
  3. setHeight(obj)
  4. {
  5. var temHeight = null ;
  6. //FF
  7. if(window.innerHeight)
  8. {
  9.      temHeight = window.innerHeight ; //Einschließlich Seitenhöhe und Bildlaufleistenhöhe
  10. }
  11. else
  12. {
  13.       temHeight = document.body &&document.body.clientHeight;
  14. }
  15. if(temHeight > document.body.clientHeight)//Seitenhöhe
  16. {
  17.       oDiv.style.height = temHeight + "px";
  18. }
  19. sonst
  20. {
  21.      oDiv.style.height = document.body.clientHeight +"px";
  22. }
  23. }
  24. window.onload = function ()
  25. {
  26. var oDiv = document.getElementById ("div1");
  27. getHeight(oDiv);
  28. }

Breitenadaptiver Code:

XML/HTML-CodeInhalt in die Zwischenablage kopierenfunction
  1. setWidth(obj)
  2. {
  3. var screenWidth = window.screen.width ;
  4. var width;
  5. var imgURL;
  6. if (screenWidth > = 1440)
  7. {
  8.           Breite = "1400px" ;
  9.           imgURL = "1400.png" ; //Bilder mit unterschiedlichen Auflösungen festlegen
  10. }
  11. else if (1024 <   Bildschirmbreite && Bildschirmbreite <   1440 )
  12. {
  13.           Breite = "1200px" ;
  14.           imgURL = "1200.png" ;
  15. }
  16. sonst {
  17.            Breite = "980px" ;
  18.            imgURL = "980.png" ;
  19. }
  20.         obj.style.width =Breite;
  21.         obj.style.backgroundImage = "url(" + imgURL + ")";
  22. })

Fünf: Höhe und Breite

mobiler Endgeräte anpassen Mobile Endgeräte sind relativ einfach zu bedienen. Fügen Sie zunächst eine Zeile mit Viewport-Tags zum Kopf des Webseitencodes hinzu.

<meta name=”viewport” content=”width=device-width, initial-scale=1″ />

viewport ist die Standardbreite und -höhe der Webseite. Das Obige bedeutet, dass die Breite der Webseite standardmäßig der Breite des Gerätebildschirms entspricht und das ursprüngliche Skalierungsverhältnis 1 beträgt, d. h. die anfängliche Größe der Webseite nimmt 100 % der Bildschirmfläche ein.

1: Da die Webseite das Layout entsprechend der Bildschirmbreite anpasst, können Sie kein Layout mit absoluter Breite oder Elemente mit absoluter Breite verwenden. Dies ist sehr wichtig. :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::3s::::::333:33333333333333333333ag33333333333333333333333333333 es333333333333333333333333333333 es33 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann dann dann dann aber33333333333333333333 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 dann3 dann3 aber3 dann3 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann nichtie dasen aber aber abersossoss aberstens aberstensss aberten aber

abers :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::3s::::::333:33333333333333333333ag33333333333333333333333333333 es333333333333333333333333333333 es33 nicht nicht nicht nicht nicht nicht

nicht

nicht

nicht nicht nicht nicht nicht dann dann dann

dann

aber33333333333333333333 nicht3 nicht3 nicht3

nicht3 nicht3 nicht3 nicht3 nicht3 dann3 dann3 aber3 dann3 nicht

nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht

nicht

nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann nichtie dasen aber aber abersossoss aberstens aberstensss aberten aber abers :::::::::::

Die obige schnelle Lösung für das Anpassungsproblem zwischen PC und mobilen Endgeräten ist der gesamte Inhalt, den der Herausgeber mit Ihnen teilt. Ich hoffe, er kann Ihnen als Referenz dienen. Ich hoffe auch, dass Sie 123WORDPRESS.COM unterstützen.

<<:  HTML-Grundlagen HTML-Struktur

>>:  Mehrere Situationen, die dazu führen, dass MySQL einen vollständigen Tabellenscan durchführt

Artikel empfehlen

Natives, benutzerdefiniertes Rechtsklickmenü von js

In diesem Artikelbeispiel wird der spezifische Co...

Detaillierte Erläuterung der MySQL-Mehrtabellenabfrage

Die Zeit vergeht immer überraschend schnell, ohne...

Verwenden Sie Tomcat, um die gemeinsam genutzte Bibliothek so einzurichten, dass sie dasselbe JAR teilt.

Da immer mehr Projekte bereitgestellt werden, wer...

Implementierungsschritte zur Kapselung von Komponenten basierend auf React

Inhaltsverzeichnis Vorwort Wie kapselt Antd Kompo...

Umgang mit Leerzeichen in CSS

1. Weltraumregeln Leerzeichen im HTML-Code werden...

Detaillierte Analyse der Prinzipien und der Verwendung von MySQL-Ansichten

Vorwort: In MySQL sind Ansichten wahrscheinlich e...

Deaktivieren der AutoVervollständigen-Funktion im Eingabefeld

Jetzt können wir ein Eingabeattribut namens „Autov...

Detaillierte Erklärung zum Anzeigen der Anzahl der MySQL-Server-Threads

In diesem Artikel wird anhand eines Beispiels bes...

Beispiel für die Erstellung einer kreisförmigen Scroll-Fortschrittsbalken-Animation mit CSS3

Thema Heute werde ich Ihnen zeigen, wie Sie mit C...

Implementierung der Installation und Deinstallation von CUDA und CUDNN in Ubuntu

Inhaltsverzeichnis Vorwort Installieren des Grafi...

Eine kurze Diskussion über Lösungen zum Stören von CSS3-Animationen

Warum steckt es fest? Es gibt eine Prämisse, die ...

Analyse gängiger Anwendungsbeispiele von MySQL-Prozessfunktionen

Dieser Artikel veranschaulicht anhand von Beispie...

5 Möglichkeiten, den diagonalen Kopfzeileneffekt in der Tabelle zu erzielen

Jeder muss mit Tabellen vertraut sein. Wir stoßen...

Probleme und Lösungen für MYSQL5.7.17-Verbindungsfehler unter MAC

Das Problem, dass MYSQL5.7.17 unter MAC keine Ver...

Tutorial zur HTML-Tabellenauszeichnung (5): Farbattribut für helle Rahmen BORDERCOLORLIGHT

In einer Tabelle können Sie die Farbe des oberen ...