Javascript verwendet REM für die gemeinsame Nutzung von Beispielen für die responsive Entwicklung

In diesem Artikel wird hauptsächlich die Verwendung von rem in Javascript für die reaktionsfähige Entwicklung vorgestellt. Der Herausgeber findet es ziemlich gut, daher werde ich es jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und werfen wir einen Blick darauf. Ich hoffe, es kann allen helfen.

Die Computerversion des Einkaufszentrums wurde gestern Abend fertiggestellt, und heute beeile ich mich, die mobile Version zu erstellen. Wenn es um die mobile Website geht, fällt mir als Erstes ein, mich daran anzupassen Die Breite verschiedener Mobiltelefonbildschirme stellt sicher, dass sie auf verschiedenen Mobiltelefonen verwendet werden kann. Als ich diese Art von Website zuvor 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 mithilfe von % berechnet. Worauf bezieht sich die Hundertheit im Prozentsatz? auf? Es bezieht sich auf das übergeordnete Element. 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 Die Aufgabe von Born besteht darin, dieses Problem zu lösen. Die Funktion der Medienabfrage besteht darin, verschiedene CSS-Stile für verschiedene Medien festzulegen. Zu den „Medien“ gehören hier die Seitengröße, die Bildschirmgröße des Geräts usw. Die am häufigsten verwendete Form ist

phone:@media screen and (max-width: 767px) {/Mobile style/}

pad: @media screen and (max-width: 991px)and(min-width:768) {/Tablet style/}

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

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

Verwendung Bei Medienabfragen müssen Sie sicherstellen, dass jedes Pixel einen entsprechenden Anpassungseffekt hat

3 Es gibt auch die Einheit rem von css3:

rem besteht darin, den Schriftgrößenwert des Stammknoten-HTML als Referenzgröße der gesamten Seite zu verwenden. Zum Beispiel 24f6ee081ffe8b8b47a5b9b95efd48bf dann 1rem=10px; wie kann man es passend machen? 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 sich hier eine kleine Grube befindet Wenn Sie diese kleine Demo zur Überprüfung zu Google Chrome bringen, werden Sie feststellen, dass die drei Ps zunächst kleiner werden, wenn Ihr Browserfenster kleiner wird, und dass sie sich nach Erreichen eines bestimmten Werts nicht mehr bewegen. Der Grund dafür ist, dass Google Chrome standardmäßig die Der Browser unterstützt eine Mindestschriftgröße von 10 Pixeln. Wenn er kleiner als dieser Wert ist, ist er nicht kleiner. Dies ist das Problem, auf das ich damals gestoßen bin, als ich es im Internet durchsucht habe noch einmal, aber ich konnte es immer noch nicht herausfinden.

Verwandte Empfehlungen:

Teilen Sie, wie man Bootstrap verwendet Responsive Tools

Mehrere responsive Frameworks, die für Webprogrammierer geeignet sind

Wie man mit CSS3 ein responsives Layout erstellt

Das obige ist der detaillierte Inhalt vonJavascript verwendet REM für die gemeinsame Nutzung von Beispielen für die responsive Entwicklung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!