Comment implémenter l'adaptation mobile dans vue-cli-js tutoriel-php.cn

Comment implémenter l'adaptation mobile dans vue-cli

亚连

Libérer： 2018-06-15 14:21:18

original

3000 Les gens l'ont consulté

Cet article présente principalement la configuration de lib-flexible + rem basée sur vue-cli pour réaliser une adaptation mobile. Les amis dans le besoin peuvent se référer à

Installation de flexible

npm install lib-flexible --save

Copier après la connexion

Introduire flexible

Ajoutez le code suivant dans le fichier d'entrée du projet main.js, introduisez flexible

import &#39;lib-flexible&#39;

Copier après la connexion

px dans rem

Utilisez le px2rem-loader de Webpack pour convertir automatiquement les px en rem

Installez px2rem-loader

npm install px2rem-loader --save-dev

Copier après la connexion

Configurez px2rem-loader

Dans le fichier généré par vue-cli, recherchez le fichier build/utils.js suivant, et ajoutez la configuration comme indiqué ci-dessous

À propos des importLoaders : Si vous avez Pour toute question, veuillez vous référer à Webpack Utilisation approfondie et pratique 4-4

Instructions de mise à jour 2017.12.8 : Si vous devez configurer importLoaders, veuillez vous référer aux instructions en bas.

Utilisation de px2rem

Après avoir installé px2rem, il existe quelques différences dans l'utilisation de px. Vous pouvez vous référer à l'introduction officielle de px2rem. , qui est brièvement présenté ci-dessous une fois.

Écrivez px directement, et il sera converti directement en rem après la compilation ---- Sauf dans les deux situations suivantes, utilisez ceci

pour d'autres longueurs Ajoutez /*no*/ après. px, et il ne sera pas converti en px, sera affiché tel quel. --- Généralement, les bordures doivent utiliser ceci

pour ajouter /*px*/ après px, ce qui générera trois ensembles de codes selon différents dpr. ----Les polices générales doivent utiliser ceci

Exemple de code

Avant la compilation (code écrit par vous-même)

.selector {
 width: 150px;
 height: 64px; /*px*/
 font-size: 28px; /*px*/
 border: 1px solid #ddd; /*no*/
}

Copier après la connexion

Après la compilation ( code emballé après)

.selector {
 width: 2rem;
 border: 1px solid #ddd;
}
[data-dpr="1"] .selector {
 height: 32px;
 font-size: 14px;
}
[data-dpr="2"] .selector {
 height: 64px;
 font-size: 28px;
}
[data-dpr="3"] .selector {
 height: 96px;
 font-size: 42px;
}

Copier après la connexion

Redémarrez le projet et vous pourrez volontiers utiliser le px sur le brouillon de conception.

Remarque : Pièges

Vous ne pouvez pas ajouter une balise méta nommée viewport à l'en-tête de index.html, flexible l'ajoutera automatiquement pour nous !

Mise à jour : Lorsque le CSS est importé de l'extérieur, le problème de savoir si px2rem peut convertir le rem

Mise à jour 2017.12.8 : Dans les applications pratiques, on constate que pour les fichiers CSS importés de l'extérieur , parfois px2rem peut les convertir normalement. L'heure ne peut pas être modifiée, quelle en est la raison ? J'ai testé trois manières différentes d'introduire CSS et j'ai constaté que la première peut être convertie normalement, mais que les deuxième et troisième ne peuvent pas être converties normalement. Quant à la raison, je ne la comprends toujours pas en raison de mon manque de connaissances. Veuillez demander à un maître d'expliquer la différence entre les trois méthodes d'introduction.

Si vous comprenez ces méthodes, il n'est pas nécessaire de configurer les importLoaders de cssLoader, car la méthode suivante est plus facile à contrôler si le CSS importé en externe doit être converti en rem, mais la modification des importLoaders ne peut pas le contrôler , cela forcera la conversion .

<style src=&#39;../assets/style.css&#39;>
 /* px2rem能正常转换 */
</style>
<style>
 /* px2rem不能正常转换 */
 @import &#39;../assets/style.css&#39;;
</style>
<style>
 /* px2rem不能正常转换 */
 @import url(&#39;../assets/style.css&#39;);
</style>

Copier après la connexion

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.