Comment rendre le contenu d'une page Web mobile adaptatif

Cette fois je vais vous montrer comment rendre le contenu web sur le terminal mobile adaptatif. Quelles sont les précautions pour adapter le contenu web sur le terminal mobile. Voici des cas pratiques, jetons un coup d'oeil. .

Enfin terminé le projet en cours, la personne disparue est de retour ! Au cours du travail sur le projet, j’ai rencontré de nombreux points qui méritent réflexion, alors expliquons-les rapidement. Le premier problème rencontré est celui de l’adaptation de la taille des pages web.

Actuellement, les méthodes les plus couramment utilisées sont :

• Tout d'abord, faites en sorte que la taille de la page remplisse l'écran sans déborder. Ajoutez simplement viewport (comme indiqué ci-dessous) dans la balise html. Les paramètres représentent respectivement : largeur de la page = largeur de l'écran, les taux de mise à l'échelle maximum et minimum sont tous deux de 1 et les utilisateurs ne sont pas autorisés à zoomer. .

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

• Pourcentage adaptatif : convertissez l'unité de longueur en pourcentage, de sorte que la longueur et la largeur de l'élément changent en conséquence sous différentes largeurs.

Avantages : Connexion transparente entre les largeurs et relativement facile à utiliser.

Inconvénients : La taille de la police nécessite un autre ensemble de méthodes adaptatives pour être ajustée ; lorsque la largeur de l'écran est supérieure à 700 px, les éléments seront trop grands s'ils continuent à être basés sur des pourcentages, et ce sera plus gênant. à ajuster à ce moment.

•rem, em adaptative : utilisez la méthode media query pour déterminer comment modifier la taille de la police ou Utilisez ensuite rem, em au lieu de px comme unité pour réaliser l'adaptation.

Avantages : Il peut être réglé en fonction de différentes largeurs d'écran, ce qui peut parfaitement résoudre le problème de proportion lorsque l'écran est trop grand mentionné ci-dessus. Il n’y a pas non plus de problème avec la taille de la police.

Inconvénients : défini en fonction de l'intervalle de largeur, une transformation transparente ne peut pas être obtenue.

------------------------------------------------------ ------ ------------------------------------

Ces compatibilités Les méthodes ont chacune leurs propres avantages et inconvénients. Aucune d’entre elles n’est parfaite. Comment combiner les avantages tout en évitant les inconvénients ?

En faisant référence à la méthode adaptative de Taobao, j'ai accidentellement découvert que la taille de la police de la page certain.

Donc, je suppose qu'il utilise JS pour obtenir la largeur de l'écran, puis la rétrécit selon un rapport fixe et l'utilise comme longueur unitaire de rem pour réaliser l'adaptation.

N’est-ce pas une solution avec tous les avantages ! ? S'il vous plaît, permettez-moi de m'enthousiasmer (☆_☆)

--------------------------------- --------------------------------------------------

Le code JS est très simple à écrire et il résout parfaitement le problème de l'utilisation de rem pour établir des connexions transparentes.

Mais le problème est survenu après des tests sur le terminal mobile. Safari sur le terminal mobile a exécuté le JS à une vitesse fulgurante avant que le HTML ne soit lu avant que la largeur de la page ne soit définie en fonction de la fenêtre d'affichage. . Une largeur incorrecte fait que l'élément devient deux fois plus grand que 0^0. SetTimeout() doit être utilisé pour résoudre le problème.

------------------------------------------------------ ------ ------------------------------------

Code final

Zepto(function($){   
    var win = window,   
        doc = document;   
  
    function setFontSize() {   
        var winWidth =  $(window).width();   
        // 640宽度以上进行限制   
        var size = (winWidth / 640) * 100;   
        doc.documentElement.style.fontSize = (size < 100 ? size : 100) + &#39;px&#39; ;   
    };   
       
    //防止在html未加载完毕时执行，保证获取正确的页宽   
    setTimeout(function(){   
        // 初始化   
        setFontSize();   
           
    }, 200);   
    
});

Enfin, j'ai ajouté un piège découvert lors du processus adaptatif d'utilisation de rem - lorsque le code HTML est défini sur une taille de police plus grande, les éléments en ligne margin et padding à l'intérieur de l'élément de bloc apparaîtra. Pour des valeurs supplémentaires, la solution consiste à définir la taille de la police de l'élément de bloc environnant sur 0.

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment gérer le débordement de contenu dans le tableau

Comment obtenir le nombre de mots restants dynamique de textarea

htmlPoints de connaissances importants que vous devez connaître sur PHP

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!