Comment configurer l'adaptation mobile lib-flexible+rem dans vue-cli

Cette fois, je vais vous montrer comment configurer l'adaptation mobile lib-flexible+rem dans vue-cli Comment configurer l'adaptation mobile lib-flexible+rem dans vue-cli Notes Oui Lequel. ceux-ci, voici des cas pratiques, jetons-y un coup d'œil.

Installer flexible

npm install lib-flexible --save

Présentation de flexible

Ajoutez le code suivant au projet fichier d'entrée main.js et introduisez flexible

import 'lib-flexible'

px à rem

Utilisez le chargeur px2rem de Webpack pour convertir automatiquement px en rem

Installez px2rem-loader

npm install px2rem-loader --save-dev

Utilisation de px2rem

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

Écrivez directement px, et il sera directement converti en rem après compilation ---- Sauf dans les deux situations suivantes, utilisez-le pour d'autres longueurs

L'ajout de /*no*/ après px ne convertira pas px, mais affichera tel quel. ---Les frontières générales doivent utiliser ceci

L'ajout de /*px*/ après px générera trois ensembles de codes selon différents dpr. ----Les polices générales doivent utiliser ceci

Exemple de code

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

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

Après compilation (code packagé)

.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;
}

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

Attention : Pièges

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

Mise à jour : Importation de CSS de l'extérieur, la question de savoir si px2rem peut convertir rem

Mise à jour 2017.12.8 : dans les applications pratiques, nous avons constaté que parfois px2rem peut convertir normalement les fichiers CSS importés en externe, mais parfois il ne peut pas les convertir. 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 de contrôler si le CSS importé en externe doit être converti en rem, mais la modification des importLoaders ne peut pas le contrôler, ce sera forcer la conversion .

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

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

Lecture recommandée :

Explication détaillée de l'utilisation de vue-cli

Explication détaillée de l'empaquetage des fichiers modèles Vue et des étapes de configuration

Comment JS empêche-t-il l'étirement de l'image de s'adapter

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!