Maison > interface Web > tutoriel CSS > 4 méthodes d'adaptation du terminal mobile

4 méthodes d'adaptation du terminal mobile

Guanhui
Libérer: 2020-06-02 09:29:07
avant
5684 Les gens l'ont consulté

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;
  }
}
Copier après la connexion

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

4 méthodes dadaptation du terminal mobile

!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);
Copier après la connexion

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}}
Copier après la connexion

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);
}
Copier après la connexion
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!

Étiquettes associées:
css
source:juejin.im
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal