Partagez quelques conseils pratiques que vous avez accumulés sur un projet mobile récemment écrit

1·Fichier de Réinitialisation de style
Notez que le sélecteur de caractères génériques n'est pas utilisé dans les styles suivants, comme effacer les marges intérieures et extérieures*

Au début, je pensais que c'était parce que le poids du sélecteur de Joker était trop bas
Plus tard, j'ai lu sur un blog que ce n'était pas,Il n'y a pas de sélecteur de caractères génériques,Principalement à cause de la performance du sélecteur

*{}Les calculs sont incroyables.,Il va traverser toutDOMÉlément,Consommation spéciale de performance du navigateur
Et l'écriture suivante ne récupérera que les éléments que nous avons écrits,Économies de performance considérables

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    
    display: block;
}
body {
    
    line-height: 1;
}
ol, ul {
    
    list-style: none;
}
blockquote, q {
    
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    
    content: '';
    content: none;
}
table {
    
    border-collapse: collapse;
    border-spacing: 0;
}

.clearfix::after {
    
    content: ' ';
    visibility: hidden;
    display: block;
    height: 0;

    clear: both;
}

.one-line {
    
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hide {
    
    display: none;
}
/*  C'est surtout pour s'adapter rem*/
html,body{
    
	width:100%;
}

2·Adaptateur d'extrémité mobile

1. Avant d'écrire sur le projet mobile , Nous devons d'abord cibler viewportC'estmetaÉtiquette à configurer

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

2. Je l'utilise ici.remEn unités, Voici mon code pour rem Quelques paramètres initiaux pour , Écrivez - le sur chaque page bodyAvant

<script>
        (function(){
    
            var docEl = document.documentElement;

            function setRemUnit() {
    
                // AccèsremValeur de référence pour
                var rem = docEl.clientWidth / 10;
                // Paramètres dynamiquesHTMLÉlément racinefont-size
                docEl.style.fontSize = rem + "px";
            }
            setRemUnit();
            // Lorsque la taille de la fenêtre change Déclencheur
            window.onresize = setRemUnit();
            //  Lorsque la fenêtre apparaît à l'écran courant  （ Il y a un problème de compatibilité avec le navigateur  ）
            window.addEventListener('pageshow',function(e){
    
                if (e.persisted) {
    
                    setRemUnit();
                }
            })
        })();
    </script>

3. Mobile end1Problème avec la bordure Pixel

Si la résolution de l'écran de notre téléphone est plus élevée , C'est un écran double ou triple , Si on écrit sur la page border-bottom: 1px; À cette époque, on écrivait 1px,Mais en fait, c'estcssPixels, Pas un pixel physique , Si on regarde attentivement , Sur un écran double ou triple, ce n'est pas vraiment 1Pixels physiques, Mais la hauteur de deux ou trois pixels physiques , Pour résoudre l'écran multiple 1 Problèmes avec les bordures de pixels qui seront affichées comme des bordures Multi - pixels , Nécessité d'introduire une solution , Ce programme est cssDocumentation

À propos de mobile end 1Problème avec la bordure Pixel, Vous pouvez aller voir un de mes blogs Mobile end1Problème avec la bordure Pixel

4. Utilisation du terminal mobileclickLier l'événement de clic,300msProblème de retard

Dans le développement de terminaux mobiles, Sur certains modèles , Sur certains navigateurs ,Lorsqu'il est utiliséclickAu moment de l'incident,C'estclick L'événement sera retardé de 300 millisecondes avant l'exécution , Cela peut entraîner une très mauvaise expérience utilisateur , Pour résoudre ce problème, nous pouvons introduire un fastclickBibliothèque, Ensuite, nous pouvons utiliser parfaitement clickC'est arrivé., Comment citer ？

Il faut qu'on fonctionne au terminal ：npm install fastclick --save,Une fois l'installation terminée, Nous pouvons alors faire référence à ce module dans le projet ,Adoptionfastclick.attach()Méthodes, Attachez - le à document.bodyAllez.
Le Code estfastclick.attach(document.body)

3·RendreDOM Chaîne de modèle multi - usage lors de la construction , Peut améliorer l'efficacité du chargement des pages Web
4·Recommander unVscode Plug - in,Peut être réalisépxTransfert directrem
La capture d'écran suivante montre les étapes d'installation