Comment implémenter le côté PC adaptatif dans Uniapp

Avec la popularisation d'Internet, la demande de PC et de terminaux mobiles augmente également progressivement. De nombreuses entreprises et particuliers ont procédé à des transformations d'adaptation multi-terminaux pour leurs sites Web afin de mieux répondre aux besoins des utilisateurs. Parmi les technologies d’adaptation multi-terminaux, uniapp est sans aucun doute l’une des solutions les plus populaires actuellement. Alors, comment implémenter le côté PC adaptatif dans uniapp ?

1. Pourquoi avons-nous besoin d'une version PC adaptative ?

Dans les développements précédents, une approche courante consistait à développer séparément le côté PC et le côté mobile. De nos jours, avec de plus en plus d'interactions entre PC et terminaux mobiles, de nombreuses personnes commencent à se rendre compte qu'il est long et laborieux de développer à chaque fois un site Web côté PC et côté mobile. Le PC adaptatif est donc devenu un moyen technique indispensable.

2. Comment Uniapp implémente-t-il le PC adaptatif ?

1. Utiliser flexible.js

flexible.js est une solution spécialement utilisée pour le développement mobile, qui permet d'ajuster automatiquement la mise en page en fonction des différentes tailles d'écran. Il peut également être utilisé dans Uniapp pour le développement adaptatif de PC.

Comment utiliser :

1) Créez d'abord un dossier js dans le répertoire statique, puis téléchargez le fichier flexible.js.

2) Introduisez flexible.js dans index.html.

3) Dans le fichier App.vue, utilisez la fonction hook monté pour définir la taille de la fenêtre et l'adapter à l'écran en introduisant flexible.js.

2. Utilisez les requêtes multimédias CSS

Les requêtes multimédias CSS ajustent essentiellement les styles en fonction de différentes tailles d'écran afin qu'elles puissent être parfaitement affichées à différentes résolutions. Par conséquent, lors du développement d’uniapp, différentes feuilles de style peuvent être définies via des requêtes multimédias pour parvenir à une adaptabilité à des appareils de différentes tailles.

Par exemple, pour les appareils de plus grande taille, vous pouvez utiliser le code suivant :

@écran multimédia uniquement et (largeur minimale : 992 px) {

/ Ajoutez un style pour les appareils de plus grande taille ici/

}

Pour les appareils de petite taille, vous pouvez utiliser le code suivant :

@media only screen et (max-width : 991px) {

/ Ajoutez des styles pour les appareils de petite taille ici/

}

3. API pour l'adaptation

Pour l'adaptation côté PC, uniapp fournit également les API correspondantes. Par exemple, vous pouvez obtenir la largeur et la hauteur de l'écran de l'appareil via uni.getSystemInfoSync(), puis ajuster le style en fonction du rapport hauteur/largeur.

Par exemple, le code suivant évaluera la largeur de l'appareil pour sélectionner une feuille de style différente :

let systemInfo = uni.getSystemInfoSync();

if (systemInfo.windowWidth >= 992) {

/ in Cela ajoute le style des appareils de grande taille /

} else {

/ Cela ajoute le style des appareils de petite taille /

}

Bref, pour l'adaptation côté PC, on peut y parvenir des trois manières ci-dessus. Bien entendu, le choix de la technologie doit également être différent en fonction des différents besoins. La clé est de l'utiliser de manière flexible pour rendre notre développement plus efficace et plus excitant.

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!