Ausführliche Erklärung, wie reaktionsfähige Textgrößenänderungen in CSS implementiert werden

Einfach ausgedrückt bedeutet Reaktionsfähigkeit, Webseiten ein gutes Surferlebnis auf verschiedenen Anzeigegeräten zu bieten.

Ganz gleich, ob es darum geht, @media-Elemente einzuschließen und den UserAgent im Hintergrund dazu zu bringen, verschiedene Seiten zurückzugeben , verwenden Sie das Ansichtsfenster, um die Ansicht einzuschränken, oder verwenden Sie das HTML-Attribut des Stammelements, um die Größe usw. zu berechnen.

Sie alle können ein responsives Layout mit ihren eigenen Programmiereigenschaften implementieren. Wenn Sie sagen müssen, welches das beste ist Ich fürchte, es kommt immer noch auf die Bedürfnisse an.

Als nächstes wollen wir kurz skizzieren, wie diese Layoutmethoden implementiert werden.

Der bekannte Bootstrap, dessen Zaunlayout repräsentativ für Medienabfragen ist, bestimmt anhand der Bildschirmbreite, ob das Element vollständig umschlossen und angezeigt wird.

<style><br>.col-xs-2 {width: 50%}
@media (min-width: 768px) {
  .col-sm-3 {width: 33.333333%}
}
@media (min-width: 992px) {
  .col-md-4 {width: 25%}
}
@media (min-width: 1200px) {
  .col-lg-5 {width: 20%}
}
</style>
 <p class="col-xs-2 col-sm-3 col-md-4 col-lg-5"></p>

Es ist sehr bequem zu bedienen und zu verstehen. Das Anzeigegerät ist entsprechend der Breite in vier Intervalle unterteilt, und die Breite wird in jedem Intervall entsprechend angegeben der Anteil des Zauns.

Mit der rasanten Entwicklung des mobilen Internets und der Nutzung von WebApps sowie der Tatsache, dass die Auflösung und Größe von Mobiltelefonen von den Herstellern ständig aktualisiert wird,

Die Designanforderungen unter 768 Pixel haben jedoch zugenommen Die Anforderungen an die Reaktionsfähigkeit der Menschen haben sich entsprechend geändert.

Ist beispielsweise die Textgröße auf dem iPhone4 noch für das iPhone6 ​​geeignet, das 1-Pixel-Problem des Retina-Bildschirms, GerätePixelRate- und Bildschirmskalierungsprobleme usw....

Um diese Probleme zu lösen Es wurde eine sehr umfangreiche Lösung erstellt. Pläne, kommen wir nacheinander.

Erstens gilt: Je größer der Bildschirm, desto größer wird auch die Schriftgröße, was eine gute Idee zu sein scheint.

html { font-size: 10px;}
@media (min-width: 376px) and (max-width: 414px) {
  html{font-size: 11px;}
}
@media (min-width: 415px) and (max-width: 639px) {
  html{font-size: 13px;}
}
@media (min-width: 640px) and (max-width: 719px) {
  html{font-size: 14px;}
}
@media (min-width: 720px) and (max-width: 749px) {
  html{font-size: 15px;}
}
@media (min-width: 750px) and (max-width: 799px) {
  html{font-size: 16px;}
}
@media (min-width: 800px) and (max-width: 992px) {
  html{font-size: 20px;}
}
body {
  margin: 0;
  font-size: 1.6rem;
}

Die Praxis zeigt, dass die Erfahrung mit großen Schriftarten auf dem iPhone6 ​​plus tatsächlich nicht schlecht ist.

Es scheint jedoch, dass größere Schriftarten nicht bedeuten, dass sie besser aussehen. Auf dem iPad sind große Schriftarten beispielsweise definitiv kein gutes visuelles Erlebnis.

Es gibt also eine andere Möglichkeit, die Schriftgröße des Stammelements anhand der Breite und der DevicePixelRate zu berechnen, wobei dpr ebenfalls stärker berücksichtigt wird als bei der oben genannten Methode.

<style>
body {font-size: .12rem}
</style>
<script>
!function() {
  function e() {
    r.innerText = "html{font-size:" + (a.style.fontSize = a.getBoundingClientRect().width / o * d + "px") + " !important;}"
  }
  var t = navigator.userAgent,
    n = (t.match(/(iPhone|iPad|iPod)/), t.match(/Android/i), window),
    i = document,
    a = i.documentElement,
    o = (n.devicePixelRatio, 375),
    d = 100,
    r = (i.head.querySelector(&#39;[name="viewport"]&#39;), i.createElement("style"));
  r.innerText = "html{font-size:100px !important}", i.head.appendChild(r), e(), n.addEventListener("resize", e, !1);
  a.className += t.match(/ucbrowser/i) ? " app-uc " : ""
}();
</script>

Der Grund, warum die Schriftgröße nicht direkt mit 0,12 multipliziert wird, kann darin liegen, dass es einfacher ist, die Breite zu berechnen, z. B. 3,75rem. Es ist ein Bildschirm Breite.

Natürlich hat die Verwendung von rem anstelle von „percentage“ zum Festlegen der Breite einige Vorteile.

Zum Beispiel kann die Lücke in einem zweispaltigen Prozentlayout nur ein Prozentsatz sein (Berechnung ist eine andere Sache), was zu ungleichen Lücken zwischen links und rechts sowie oben und unten führt Das Element-Seitenverhältnis kann direkt mit Zahlenwerten vervollständigt werden, denn Now rem ist so automatisch wie ein Prozentsatz

Später habe ich herausgefunden, dass es auch die Funktion hat, den Browser auf der PC-Seite zu skalieren, um die Seite beizubehalten unverändert.

Darüber hinaus gibt es den Ansatz von Taobao, lib-flexible.js.

In Bezug auf rem ähnelt es der oben genannten Methode, 10rem ist eine Bildschirmbreite, unterscheidet sich jedoch in Bezug auf den Text,

!function(a,b){
function c(){
var b=f.getBoundingClientRect().width;b/i>540&&(b=540*i);var c=b/10;f.style.fontSize=c+"px",k.rem=a.rem=c
}
var d,e=a.document,f=e.documentElement,g=e.querySelector('meta[name="viewport"]'),h=e.querySelector('meta[name="flexible"]'),i=0,j=0,k=b.flexible||(b.flexible={});
if(g){
console.warn("将根据已有的meta标签来设置缩放比例");
var l=g.getAttribute("content").match(/initial\-scale=([\d\.]+)/);
l&&(j=parseFloat(l[1]),i=parseInt(1/j))}else if(h){var m=h.getAttribute("content");
if(m){var n=m.match(/initial\-dpr=([\d\.]+)/),o=m.match(/maximum\-dpr=([\d\.]+)/);
n&&(i=parseFloat(n[1]),j=parseFloat((1/i).toFixed(2))),o&&(i=parseFloat(o[1]),j=parseFloat((1/i).toFixed(2)))
}
}
if(!i&&!j){
var p=(a.navigator.appVersion.match(/android/gi),a.navigator.appVersion.match(/iphone/gi)),q=a.devicePixelRatio;i=p?q>=3&&(!i||i>=3)?3:q>=2&&(!i||i>=2)?2:1:1,j=1/i
}
if(f.setAttribute("data-dpr",i),!g)
if(g=e.createElement("meta"),g.setAttribute("name","viewport"),g.setAttribute("content","initial-scale="+j+", maximum-scale="+j+", minimum-scale="+j+", user-scalable=no"),f.firstElementChild)f.firstElementChild.appendChild(g);
else{
var r=e.createElement("p");r.appendChild(g),e.write(r.innerHTML)
}
a.addEventListener("resize",function(){clearTimeout(d),d=setTimeout(c,300)},!1),a.addEventListener("pageshow",function(a){
a.persisted&&(clearTimeout(d),d=setTimeout(c,300))},!1),"complete"===e.readyState?e.body.style.fontSize=12*i+"px":e.addEventListener("DOMContentLoaded",function(){
e.body.style.fontSize=12*i+"px"},!1),c(),k.dpr=a.dpr=i,k.refreshRem=c,k.rem2px=function(a){
var b=parseFloat(a)*this.rem;return"string"==typeof a&&a.match(/rem$/)&&(b+="px"),b},k.px2rem=function(a){var b=parseFloat(a)/this.rem;return"string"==typeof a&&a.match(/px$/)&&(b+="rem"),b
}}(window,window.lib||(window.lib={}));

Taobao-Touchscreen-Version möchte die Schriftgröße nicht immer größer machen, sondern immer 12px oder 24px,

Daher scheint es etwas raffinierter zu wirken, wenn viel Platz für kleine Schriftarten und Bilder gelassen wird , was auch gelöst wird. Das Problem bei der oben genannten Methode besteht darin, dass die Zeichen des PC-Ports zu groß sind.

Wenn diese Methode verwendet wird, muss sich @media außerdem auf rem verlassen, um die Bildschirmbreitenknoten zu unterteilen, z. B. 10rem, das von Taobao verwendet wird.

Lassen Sie uns abschließend über eine seltsame, aber sehr effektive Reaktionsmethode sprechen.

Haben Sie jemals eine störrische Atmosphäre gespürt, in der es mir egal ist, ob ich nicht zuhöre? Diese Methode bedeutet, dass ich, egal um welches Gerät es sich handelt Behandeln Sie das Gerät nur als 750px-Ansichtsgröße der Ausrüstung.

<meta name="viewport" content="width=750,user-scalable=no" />
 
<style>
html, body {
  width: 750px;
  margin: 0 auto;
  overflow: hidden;
}
</style>

375 Pixel sind die Hälfte des Bildschirms, was eine gute Nachricht für diejenigen ist, die H5-Anwendungsszenarien ausführen. Es macht am meisten Spaß, die Pixelpositionierung bei der Erstellung von Sprite-Bildern zu verwenden.

Aber es hat auch seine Vorteile Der Nachteil besteht darin, dass das Seitenverhältnis des Geräts ungewiss ist. Das iPhone 4 hat beispielsweise die gleiche Breite wie das iPhone 5, ist jedoch kürzer. Daher ist es am besten, eine von oben nach unten zentrierte Lösung hinzuzufügen.

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung, wie reaktionsfähige Textgrößenänderungen in CSS implementiert werden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!