adaptation de rem
Connaître quelques notions de base
11 La valeur de rem est toujours égale à la taille de la valeur de l'attribut font-size de l'élément racine (html)
2 La valeur de font-size par défaut du navigateur est de 16px
3 Le rôle de rem.js ci-dessous = flexable.js = installé amfe-flexible
4vscode utilisé dans
Fonction = La fonction du plugin px2rem-loader Pour
l'agencement du terminal mobile, on adopte la méthode flex+rem (c'est ce que nous connaissons)
PS : vw vh peut aussi être adapté à
vw : Diviser la largeur du fenêtre du navigateur en 100 parties 1vw 1 % de la largeur du navigateur
vh : Divisez la hauteur de la fenêtre d'affichage du navigateur en 100 parties 1vh = 1 % de la hauteur du navigateur
et le rapport en % La différence est que cela est toujours relatif au pourcentage de disposition de la fenêtre d'affichage est par rapport au parent
La première façon : importer ce fichier js dans la page
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
// recalc modifie la valeur de la taille de la police
recalc = function () {
// récupère largeur de mon appareil
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
// Si la largeur de l'appareil est supérieure à 750 et dépasse le retour du terminal mobile.
if (clientWidth >= 750) {
docEl.style.fontSize = ' 100px' ;
} else {
// Définit la valeur de la taille de la police sur size/750 *100
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px' ; } }
;
if
(!doc.addEventListener) return ;
// se produit sur votre écran Faites pivoter ou exécutez la fonction ci-dessus lors d'un zoom avant et arrière
win. addEventListener(resizeEvt, recalc, false);
// Exécute la fonction ci-dessus lorsque votre page est initialisée
doc.addEventListener('DOMContentLoaded', recalc, false);
/*DOMContentLoaded document est chargé et ne contient pas de ressources d'image onload contient des ressources d'image*/
})(document, window);
Si la largeur du brouillon de conception donnée par le concepteur est de 750, la
largeur des 10 lignes et des 14 lignes du brouillon de conception est modifiée à la même taille que la largeur du brouillon de conception donnée par le concepteur.
Si la largeur d'un div box sur le brouillon de conception 750 est mesuré à 375px, c'est juste ce qu'il faut Compter pour 50% de la largeur de la page
Calculé selon le fichier js ci-dessus, fontsize = 100*(750/750)px = 100px = 1rem
width : 3.75rem
Après le lancement du projet,
l'étudiant A utilise un Apple 8P pour ouvrir le site en ligne La largeur de l'appareil est de 414px.
D'abord, en entrant dans la page, le fichier rem.js sera chargé.
Dans la page ouverte par Apple 8P, fontsize = 100*(414/750)px = 55.2px = 1rem.
Lors de l'affichage de cette boîte sur Apple 8P, largeur : 3.75rem Combien est-il converti en px ? 3.75*55.2 = 207 px.
Ce 207 est exactement 50 % de l'appareil actuel
De la même manière, au début de la mise en page, j'ai suivi ce brouillon de conception pour faire en sorte que toutes les unités
largeur hauteur margin padding soient à gauche et ainsi de suite Toutes ces unités px sont écrites comme rem
, elles seront donc mises à l'échelle de haut en bas sur Apple 8. Il en est de même pour les autres téléphones mobiles. Il peut réaliser l'adaptation du terminal mobile.
Configurez-le en vscode et utilisez le plug-in css2rem plug-in
Lors de l'écriture dans le code, il n'est pas nécessaire de calculer
La deuxième façon : utiliser la bibliothèque flexable.js de Mobile Taobao
// Charger le fichier Ali CDN <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
Divisez la page en 10 parties en moyenne. Attribuez une partie à la taille de la police.
Sur le brouillon de conception 750 donné par le concepteur, 1rem = 75px.
Après avoir mesuré, les valeurs de pixel mesurées telles que la largeur et la hauteur doivent être divisées par 75
375px = Si 5rem
est remplacé par un iphone5, le téléphone mobile fait 320 pixels.Ce flexable.js obtiendra la largeur de l'appareil (320) puis attribuera un dixième à la taille de la police
1rem = 32px Ensuite, nous avons écrit 5rem = lors de la première présentation, le programmeur 160px représente également la moitié du téléphone mobile actuel et réalise l'adaptation à l'écran actuel. D'autres appareils sont similaires. Si vous utilisez ce plug-in js pour l'adaptation : définissez la valeur de référence sur 75px dans le paramètres et mesurez-le pendant le processus de mise en page. Le px sera automatiquement converti en renm via le plugin vscode
Le troisième est dans le projet vue, nous pouvons directement utiliser la méthode du plug-in
(L'avantage de cette méthode est que pendant le processus de mise en page, vous pouvez directement écrire px, et enfin, il sera automatiquement changé en rem via le plug-in.) Comment convertir px en rem
dans le projet
peut être directement conçu selon le lac bleu dans le projet de processus suivant Il suffit d'écrire le manuscrit en px
//Installer amfe-flexible
cnpm install amfe-flexible -S
//Installer px2rem-loader
cnpm installer px2rem-loader -D //Introduire
import 'amfe-flexible'
dans mian.js
//Dans le module de configuration vue.config.js
. exports = {
chainWebpack : config => {
config.module
.rule('scss')
.test(/\.scss$/)
.oneOf('vue')
.use('px2rem-loader')
.loader ('px2rem -loader')
.before('postcss-loader') // cela le fait fonctionner.
.options({
remUnit : 75, // Selon le brouillon visuel, rem est un dixième de px, 750px 75rem
remPrecision : 8 / /Réserve 8 décimales
})
.end()
}
}
// redémarre l'échafaudage
Lorsque la configuration ci-dessus est effectuée, écrivez px directement sur la page, puis exécutez et vérifiez le navigateur. Il s'avère qu'il est converti en une valeur rem
Implémentation de l'outil Vite
1 : Installer
npm install postcss-pxtorem --save-dev
npm install amfe-flexible --save-dev 2. Introduire amfe-flexible
import 'amfe-flexible'
dans mian.js
3. Dans vite.config. postcss-pxtorem dans js
import { defineConfig } de 'vite';
import postCssPxToRem de "postcss-pxtorem";
export default defineConfig({
...
css: {
postcss: {
plugins: [
postCssPxToRem({
rootValue: 75, // ( Design Draft/10) La taille de 1rem
propList : ['*'], // Attributs qui doivent être convertis, sélectionnez ici tous à convertir
})
]
}
}
})
Pour les questions d'entretien :
Résumé : La méthode d'adaptation du terminal mobile, notre société utilise la disposition flex+rem, puis coopère avec un plug-in flexable.js.
Il installe flexable et un plug-in px2rem via npm, puis. Dans le pack Web, configurez-le à l'intérieur. Quand écrire du code, écrire directement la largeur (750) du projet de conception existant sur le Blue Lake dans la mise en page pour réaliser l'adaptation du terminal mobile En fait : la fonction de ce plug-in équivaut à une surveillance dynamique Ouvrir la largeur de l'
écran de l'appareil (onLoad/DOMContentLoaded). Ou lorsque la fenêtre de l'écran change (événement de redimensionnement), surveillez dynamiquement la largeur de l'écran, puis divisez la largeur de l'écran en 10 parties et modifiez la police de l'élément racine (html). La taille de l'attribut size . Parce que rem change toujours avec la taille de cette taille de police, l'adaptation est donc réalisée
Comment implémenter moi-même ce fichier flexable.js ? (Je veux voir votre logique js)
Je pense que si je l'écris moi-même, j'écouterai l'événement onload et l'événement resize via addEventListener. Obtenez le périphérique clientWidth lorsqu'il est à l'intérieur Width. Ensuite, divisez par 10, puis modifiez la taille de la valeur font-size de l'élément html via setAttribute. Cela devrait être correct