Verwenden Sie Javascript für eine responsive Entwicklung

In diesem Artikel wird hauptsächlich die Verwendung von rem in Javascript für die reaktionsfähige Entwicklung vorgestellt. Jetzt teile ich ihn mit Ihnen und gebe Ihnen eine Referenz.

Die Computerversion des Einkaufszentrums wurde gestern Abend fertiggestellt, und ich beeile mich, heute die mobile Version zu erstellen. Wenn es um die mobile Website geht, fällt mir als Erstes ein, mich an die Breite anzupassen Verschiedene Mobiltelefonbildschirme, um sicherzustellen, dass es auf verschiedenen Mobiltelefonen normal angezeigt werden kann. Als ich zuvor diese Art von Website erstellt habe, habe ich Bootstrap eingeführt, ohne darüber nachzudenken. Aber nachdem ich das vorherige Projekt abgeschlossen hatte, stellte ich fest, dass Bootstrap zwar gut ist, ich es aber am häufigsten für das Layout verwende. Wenn die Website schließlich hochgeladen ist, wird sie auch nach der Komprimierung in Anspruch genommen Ein großer Teil, daher möchte ich dieses Mal natives Schreiben und reaktionsfähige Entwicklung verwenden (ich weiß jetzt noch ein wenig darüber:

1). Prozentmethode:

Wie der Name schon sagt, werden Rand, Abstand, Breite, Höhe usw. der Seitenelemente alle mit % berechnet. Worauf bezieht sich die Hundertzahl in der Prozentzahl in CSS? Es bezieht sich auf das übergeordnete Element. Alle Prozentsätze sind so. Wenn die Breite des untergeordneten Elements 50 % beträgt, beträgt die Breite des übergeordneten Elements 100, der Abstand links des untergeordneten Elements beträgt 50 %, die Breite des übergeordneten Elements beträgt 100 und der Rand oben des untergeordneten Elements Wenn das Element 20 % beträgt, beträgt die Höhe des übergeordneten Elements 100. Daher ist die Standardbreite des Körpers die Bildschirmbreite (bezogen auf die Browserbreite im PC). Dies ist nur für Seiten mit einfachen Layouts geeignet komplexe Seiten umzusetzen.

2. Medienabfrage:

Das Problem, das wir lösen möchten, ist die Anpassung an den Mobiltelefonbildschirm Dieses Problem. Die Funktion der Medienabfrage besteht darin, verschiedene CSS-Stile für verschiedene Medien festzulegen. Die „Medien“ umfassen hier die Seitengröße, die Bildschirmgröße des Geräts usw. Die am häufigsten verwendete Form ist

phone:@media screen und (maximale Breite: 767 Pixel) {/Mobile-Stil/}

Pad: @media screen und (maximale Breite: 991 Pixel) und (minimale Breite: 768) {/Tablet-Stil/}

pc:@media screen and (min-width: 992px){/PC style/}

...(Sie können auch weitere Knoten festlegen)

Wenn Sie Medienabfrage verwenden Um sicherzustellen, dass jedes Pixel einen entsprechenden Anpassungseffekt hat, müssen Sie natürlich einen kleineren Breitenbereich festlegen.

3 Es gibt auch die Einheit rem von CSS3:

rem soll den Schriftgrößenwert des Stammknoten-HTML als Basisgröße der gesamten Seite verwenden. Wie kann also 1rem=10px; Dann müssen Sie js verwenden, um die Breite des Fensters (Breite des Browserfensters) zu ermitteln. $(window).width() Wenn die Seite geladen wird, legen wir die maximale Breite im Allgemeinen auf 640 Pixel fest, da 640 Pixel kann garantieren, dass bei der Anzeige auf dem bislang breitesten Mobiltelefon beide Enden der Webseite gerade noch auf den Bildschirm passen. Lassen Sie mich Ihnen ein kleines Beispiel geben.

Die drei P's von Bildschirmzoom und Zoom stehen ebenfalls in derselben Zeile.

html

<p class="container">
  <p class="box">1</p>
  <p class="box">2</p>
  <p class="box">3</p>
</p>

css

<style>
  html{font-size: 20px;}
  .container{
    max-width: 640px;
    border:1px solid red;
    margin:0 auto;
    overflow: hidden;
    box-sizing: border-box;
  }
  .box{
    float: left;
    width:10.6rem;
    //我这里设置html的font-size:20px;最大
宽为640px,即相当于640/20=32rem;一行有3个p，所以每个p宽10.6rem

你也可以像论坛里面讲的那样设置html的font-size：62.5%;因为浏览器默认像素16px;乘以62.5%之后为整数10px;方便计算

    height:10.6rem;
    border:1px solid #000;
    box-sizing: border-box;
  }
</style>

js

<script>
 window.onresize = window.onload = function () {
   var w = $(window).width();
   if(w<640){
     var size = 20*w/640;//640的时候
对应html的font-size为20，那么宽度为w是对应
的font-size可这么求
     $(&#39;html&#39;).css(&#39;fontSize&#39;,size+&#39;px&#39;);
   }
 }
</script>

Beachten Sie, dass es hier eine kleine Grube gibt. Wenn Sie diese kleine Demo zur Überprüfung zu Google Chrome bringen, werden Sie feststellen, dass die ersten drei Ps beim Verkleinern Ihres Browserfensters kleiner werden Der Grund dafür ist, dass Google Chrome standardmäßig eine Mindestschriftgröße von 10 Pixel unterstützt. Dies ist das Problem, auf das ich gestoßen bin Ich habe damals fast zwei Stunden lang online gesucht und es immer wieder demonstriert, konnte es aber immer noch nicht herausfinden.

Das Obige habe ich für alle zusammengestellt . Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So verwalten Sie Head-Tags mit Vue-Meta

Einige häufige Probleme mit Nuxt.js (ausführliches Tutorial)

React Native hat Probleme mit domänenübergreifenden Ressourcenfehlern

Installieren Sie die neueste Version von npm in nodejs (ausführliches Tutorial)

So implementieren Sie die Funktionsentprellung in js (ausführliches Tutorial)

So markieren und zeichnen Sie die Bildlaufposition im Vue-Scroller auf

Das obige ist der detaillierte Inhalt vonVerwenden Sie Javascript für eine responsive Entwicklung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!