4 méthodes d'adaptation du terminal mobile

1.@media screen réalise une mise en page Web adaptative

Avantages : aucun plug-in n'est requis et il peut s'adapter à différentes tailles de fenêtres , juste en ajoutant l'attribut d'écran @media au CSS.

Documentation officielle : @media peut définir différents styles pour différentes tailles d'écran. Surtout si vous devez configurer une page réactive, @media est très utile.

Syntaxe : @media mediatype and|not|only (media feature) { CSS-Code;>

/* 屏幕宽度大于 1200px 则 h5 的字体颜色是black */
h5{
    color: black;
  }
@media screen and (max-width: 1200px){
  h5{
    color: #eee;
  }
}
/* h5字体颜色为红色，屏幕宽度只有在869px 与900px之间生效 */
@media screen and (min-width: 869px) and (max-width: 900px){
  h5{
    color: red;
  }
}
/* 屏幕宽度小于 320px 则 h5 的字体大小是20px */
@media only screen and (max-width: 320px){
  h5{
    font-size: 20px;
  }
}

Ensuite, j'ai commencé à contacter l'adaptation du terminal mobile.

Adaptation 2.rem

Cette méthode est un article original du blogueur CSDN "sxs1995", blog.csdn.net/sxs1995/art…

L'unité de calcul est de 640px = 6,40rem,

Lorsque la largeur du brouillon de conception est de 750px, i = 750 Lorsque la largeur du brouillon de conception est de 640px, i = 640 ;

Inconvénients : lorsque la page est chargée pour la première fois, la ligne clignote pendant 1 à 2 secondes et l'expérience utilisateur lors de la prévisualisation sur les téléphones mobiles n'est pas bonne

!function(n){
  var  e=n.document,
  t=e.documentElement,
  i=720,
  d=i/100,
  o="orientationchange"in n?"orientationchange":"resize",
  a=function(){
    var n=t.clientWidth||320;n>720&&(n=720);
    t.style.fontSize=n/d+"px"
 };
  e.addEventListener&&(n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1))
}(window);

3. Utilisez @media pour implémenter l'adaptation rem

Avantages : Lorsque la largeur de l'écran change, il vous suffit de modifier la taille de la police dans l'élément HTML pour l'adapter.

/* 不同屏幕宽度，设置不同的font-size */
@media screen and (width:750px){html{font-size:100px}}
@media screen and (width:749px){html{font-size:99.87px}}
@media screen and (width:748px){html{font-size:99.73px}}
...
@media screen and (width:321px){html{font-size:42.8px}}
@media screen and (width:320px){html{font-size:42.67px}}

4. Utilisez vw pour personnaliser la mise en page adaptative rem

J'ai vu l'article de l'auteur JowayYoung sur l'utilisation flexible des compétences de développement CSS sur Nuggets, dont l'un est : Utiliser vw pour personnaliser la mise en page adaptative rem

Avantages : L'utilisation de la mise en page rem sur le terminal mobile nécessite de définir la taille de la police des différents rapports d'aspect de l'écran via JS. La combinaison des unités vw et de calc() peut s'éloigner du contrôle de JS <.>

/* 基于UI width=750px DPR=2的页面 */
html {
  font-size: calc(100vw / 7.5);
}

Actuellement, j'ai utilisé toutes les méthodes ci-dessus. Compte tenu de la quantité de code, j'utilise principalement vw pour personnaliser la mise en page adaptative rem. Avez-vous d'autres meilleures suggestions ? J'y ferai référence avec attention, merci.

Tutoriel recommandé : "

Tutoriel CSS"

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!