Explication détaillée de la façon d'implémenter des changements de taille de texte réactifs en CSS

En termes simples, la réactivité consiste à offrir aux pages Web une bonne expérience de navigation sur divers appareils d'affichage

Qu'il s'agisse d'encapsuler des éléments @media et de faire en sorte que l'agent utilisateur renvoie différentes pages en arrière-plan. , utilisez la fenêtre d'affichage pour limiter la vue, ou utilisez l'attribut html de l'élément racine pour calculer la taille, etc.

Ils peuvent tous implémenter une mise en page réactive avec leurs propres caractéristiques de programmation si vous devez dire laquelle est la meilleure. , j'ai bien peur que cela dépende toujours des besoins.

Ensuite, décrivons brièvement comment ces méthodes de mise en page sont mises en œuvre.

Le célèbre Bootstrap, sa disposition de clôture est le représentant des requêtes multimédias, qui déterminent si l'élément est enveloppé et affiché entièrement en fonction de la largeur de l'écran.

<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>

Il est très pratique à utiliser et à comprendre. Le dispositif d'affichage est divisé en quatre intervalles en fonction de la largeur, et la largeur est donnée dans chaque intervalle en fonction. la proportion de la clôture.

Cependant, avec le développement rapide de l'Internet mobile et l'utilisation des WebApp, et parce que la résolution et la taille des téléphones mobiles sont constamment mises à jour par les fabricants,

les exigences de conception inférieures à 768 px ont également augmenté en conséquence. Les gens ont commencé à avoir des changements dans leurs exigences en matière de réactivité.

Par exemple, la taille du texte sur iPhone4 est-elle toujours adaptée à l'iPhone6, le problème 1px de l'écran Retina, les problèmes de DevicePixelRate et de mise à l'échelle de l'écran, etc...

Donc, afin de résoudre ces problèmes , une solution très riche a été réalisée. Plans, venons-en un par un.

Tout d'abord, à mesure que l'écran s'agrandit, la taille de la police devient de plus en plus grande, ce qui semble être une bonne idée.

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;
}

La pratique nous dit que l'expérience des grandes polices sur iPhone6 ​​​​plus n'est en effet pas mauvaise.

Cependant, il ne semble pas que plus les polices sont grandes, plus elles sont belles. Par exemple, sur l'iPad, les grandes polices ne constituent certainement pas une bonne expérience visuelle.

Il existe donc une autre façon de le faire. La taille de la police de l'élément racine est calculée par la largeur et le périphériquePixelRate. Elle accorde également plus d'attention à la prise en compte de dpr que la méthode ci-dessus.

<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>

La raison pour laquelle la taille de la police n'est pas directement multipliée par 0,12 est peut-être qu'il est plus facile de calculer la largeur, par exemple 3,75rem. C'est un écran. largeur.

Bien sûr, il y a certains avantages à utiliser rem au lieu du pourcentage pour définir la largeur.

Par exemple, l'écart dans une disposition en pourcentage à deux colonnes ne peut être qu'un pourcentage (le calcul est une autre affaire), ce qui entraîne des écarts inégaux entre la gauche et la droite et le haut et le bas

. Le rapport hauteur/largeur de l'élément peut être complété directement avec des valeurs numériques, car Désormais, le rem est aussi automatique qu'un pourcentage

Plus tard, j'ai découvert qu'il avait également pour effet de mettre à l'échelle le navigateur côté PC pour conserver la page. inchangé.

En plus, il y a l’approche de Taobao, lib-flexible.js.

!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={}));

C'est similaire à la méthode ci-dessus en termes de rem, 10rem est une largeur d'écran, mais c'est différent en termes de texte,

La version à écran tactile Taobao ne veut pas agrandir la taille de la police, mais toujours 12px ou 24px,

En conséquence, laisser de grands espaces pour les petites polices et les images semble lui donner une impression un peu plus raffinée , ce qui est également résolu. Le problème avec la méthode ci-dessus est que les caractères du port PC sont trop grands.

De plus, si cette méthode est utilisée, alors @media doit s'appuyer sur rem pour diviser les nœuds de largeur d'écran, comme 10rem utilisé par Taobao.

Enfin, parlons d’une méthode responsive bizarre mais très efficace.

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

Avez-vous déjà ressenti une atmosphère têtue selon laquelle je m'en fiche si je n'écoute pas ? Cette méthode signifie que quel que soit l'appareil, je m'en fiche ? traitez uniquement l'appareil comme une taille d'affichage de 750 px de l'équipement.

375px représente la moitié de l'écran, ce qui est une bonne nouvelle pour ceux qui réalisent des scénarios d'application H5. C'est le plus agréable à utiliser le positionnement px lors de la création d'images de sprite

Mais il a aussi ses propres effets. propres avantages. L'inconvénient est que le rapport hauteur/largeur de l'appareil est incertain. Par exemple, l'iPhone 4 est aussi large que l'iPhone 5 mais plus court en hauteur, il est donc préférable d'ajouter une solution centrée de haut en bas.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!