Combiner HTML et CSS pour implémenter du code adaptatif pour les pages Web mobiles

Le contenu de cet article concerne le code qui combine HTML et CSS pour réaliser l'adaptation de pages Web mobiles. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Tout d'abord, je travaille récemment sur un projet, l'écriture de pages Web mobiles, principalement sur des problématiques adaptatives. Si vous n'utilisez pas bien bootstrap et autres frameworks front-end, et que vous ne voulez pas perdre de temps, c'est ennuyeux qu'il ne puisse pas s'adapter Ici, je vais vous présenter ma méthode

. c'est aussi une combinaison d'idées de nombreuses personnes.

1. Ajoutez cette ligne de code en tête :

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">

Cette phrase sert à régler automatiquement le zoom. Cependant, elle ne s'adapte pas totalement à tous les téléphones mobiles et vous naviguez. avec Cela peut être normal lors du débogage en mode téléphone mobile, mais c'est en réalité anormal lors du passage à un vrai téléphone mobile. Nous devons donc encore apporter des changements.

2. Il est recommandé d'utiliser rem au lieu de px lorsque vous utilisez magin, padding, font-size et d'autres attributs. Vous n'êtes peut-être pas familier avec rem. Ici, j'ai fourni un morceau de code js. peut être importé directement. , il n'y a pas lieu de s'inquiéter de ce qu'est rem. Concernant le principe, j'écrirai un autre blog pour le présenter. Ce blog expliquera comment l'utiliser. Il s'agit du code js suivant, qui peut être mis en HTML lors de la rédaction d'une page Web. Le 640 dans le code ci-dessous fait référence à la largeur de l'écran du téléphone mobile. De manière générale, la largeur maximale de l'écran du téléphone mobile sur le marché est de 640 pixels, donc i=640 est utilisé ici pour faire référence à la largeur maximale de l'écran. le minimum est de 320 px, puis en citant le js suivant. Vous pouvez écrire votre propre page Web. N'oubliez pas que 1rem=100px dans ce js est en fait pour une conversion facile. Par exemple, font_size:14px nous pouvons écrire, font_size:0.14rem.

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

3. D'accord, laissez-moi vous montrer l'effet d'une image de carrousel pour illustrer. Tout d'abord, entrez le code

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">





    


    
  

    

 
     

        
 
       

        

        

        

        

      
    

    

    
  

   

Recommandations associées :

Comment implémenter l'effet d'ombre de police à l'aide des attributs CSS ? (Démonstration de code)

Comment utiliser le CSS pour ajouter automatiquement un effet d'ombre lorsque la souris se déplace sur un bloc div ?

La combinaison de la 2D et de la 3D en HTML et CSS3 permet d'obtenir des effets d'animation

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!