J'étais récemment dans une situation où je voulais montrer un iPhone sur un site Web. Je voulais que les utilisateurs puissent interagir avec une démonstration d'application sur ce téléphone ?simulé?, il a donc d? être rendu dans CSS, pas une image. J'ai trouvé une grande bibliothèque appelée MarvelApp / Devices.css. La bibliothèque a implémenté l'appareil dont j'avais besoin avec Pure CSS, et ils avaient l'air super, mais il y avait un problème: les appareils qu'il offrait n'étaient pas réactifs (c'est-à-dire qu'ils ne pouvaient pas être mis à l'échelle). Un problème ouvert a énuméré quelques options, mais chacune avait des incompatibilités de navigateur ou d'autres problèmes. J'ai décidé de modifier la bibliothèque pour rendre les appareils réactifs.

Voici la bibliothèque redonnable finale. Ci-dessous, nous allons parcourir le code impliqué dans la création.

La bibliothèque originale a été écrite en SASS et implémente les appareils à l'aide d'éléments avec dimensionnement fixe dans des pixels. Les auteurs ont également fourni un exemple de HTML simple pour chaque appareil, y compris l'iPhone X avec lequel nous travaillerons tout au long de cet article. Voici un aper?u de l'original. Notez que l'appareil qu'il rend, bien que détaillé, est assez grand et ne modifie pas les tailles.

Voici l'approche

Il y a trois astuces CSS que j'ai utilisées pour rendre les appareils redonnables:

1. calc (), une fonction CSS qui peut effectuer des calculs, même lorsque les entrées ont des unités différentes
2. --Tize-Divisor, une propriété personnalisée CSS utilisée avec la fonction var ()
3. @media requêtes séparées par la largeur min

Jetons un coup d'?il à chacun d'eux.

C Alc ()

La fonction CSS Calc () nous permet de modifier la taille des différents aspects de l'appareil. La fonction prend une expression en entrée et renvoie l'évaluation de la fonction comme sortie, avec des unités appropriées. Si nous voulions faire les appareils la moitié de leur taille d'origine, nous aurions besoin de diviser chaque mesure de pixels par 2.

Avant:

 Largeur: 375px;

Après:

 Largeur: calc (375px / 2);

Le deuxième extrait donne une longueur de la moitié de la taille du premier extrait. Chaque mesure de pixels dans la bibliothèque d'origine devra être enveloppée dans une fonction calc () pour que cela redimensionne l'ensemble de l'appareil.

var (–size-divisor)

Une variable CSS doit d'abord être déclarée au début du fichier avant de pouvoir être utilisée n'importe où.

 :racine {
 --Tize-Divisor: 3;
}

Avec cela, cette valeur est accessible tout au long de la feuille de style avec la fonction var (). Cela sera extrêmement utile car nous voulons que tous les dénombrements de pixels soient divisés par le même numéro lors de la redimensionnement des appareils, tout en évitant les nombres magiques et en simplifiant le code nécessaire pour rendre les appareils réactifs.

 Largeur: calc (375px / var (- taille-divisor));

Avec la valeur définie ci-dessus, cela renverrait la largeur d'origine divisée par trois, en pixels.

@médias

Pour rendre les appareils réactifs, ils doivent répondre aux modifications de la taille de l'écran. Nous y parvenons en utilisant des requêtes multimédias. Ces requêtes regardent la largeur de l'écran et le feu si la taille de l'écran traverse les seuils. J'ai choisi les points d'arrêt en fonction des tailles de bootstrap pour XS, SM, etc.

Il n'est pas nécessaire de définir un point d'arrêt à une largeur minimale de pixels nul; Au lieu de cela, la déclaration racine au début du fichier gère ces écrans extra-petits. Ces requêtes médiatiques doivent aller à la fin du document et être organisées par ordre croissant de la largeur min.

 @Media (Min-Width: 576px) {
 :racine {
  --Tize-Divisor: 2;
 }
}
@Media (Min-Width: 768px) {
 :racine {
  --size-divisor: 1,5;
 }
}
@Media (Min-Width: 992px) {?
 :racine {
  --Tize-Divisor: 1;
 }
}
@Media (Min-Width: 1200px) {?
 :racine {
  --size-divisor: .67;
 }
}

La modification des valeurs de ces requêtes ajustera l'ampleur de la redimensionnement que l'appareil subit. Notez que Calc () gère les flotteurs aussi bien que les entiers.

Prétraitement du préprocesseur avec Python

Avec ces outils en main, j'avais besoin d'un moyen d'appliquer ma nouvelle approche à la bibliothèque multiplice. Le fichier résultant commencera par une déclaration de variable, inclut la bibliothèque entière avec chaque mesure de pixels enveloppée dans une fonction CALC () et se termine par les requêtes multimédias ci-dessus.

Plut?t que de préparer les changements à la main, j'ai créé un script Python qui convertit automatiquement toutes les mesures de pixels.

 échelle Def (jeton):
 Si jeton [-2:] == '; \ n':
  return 'calc (' token [: - 2] '/ var (- size-divisor)); \ n'
 token elif [-3:] == '); \ n':
  return '(' token [: - 3] '/ var (- size-divisor)); \ n'
 return 'calc (' token '/ var (- taille-divisor))'

Cette fonction, étant donné une cha?ne contenant NNPX, renvoie CALC (nnpx / var (- taille-divisor));. Tout au long du fichier, il n'y a heureusement que trois matchs pour Pixels: NNPX, NNPX; et nnpx);. Le reste n'est que la concaténation des cordes. Cependant, ces jetons ont déjà été générés en séparant chaque ligne par des caractères d'espace.

 Def Build_file (SCSS):
 out = ': root {\ n \ t - size-divisor: 3; \ n} \ n \ n'
 pour la ligne dans SCSS:
  tokens = line.split ('')
  pour i à portée (len (jetons)):
   Si 'px' dans les jetons [i]:
    jetons [i] = échelle (jetons [i])
  out = '' .join (jetons)
 out = "@Media (Min-Width: 576px) {\ n \
  : root {\ n \ t --dimense-divisor: 2; \ n \
  } \ n} \ n \ n @ media (min-large: 768px) {\ n \
  : root {\ n \ t --dimense-divisor: 1.5; \ n \
  } \ n} \ n \ n @ media (min-large: 992px) {\
  \ n: root {\ n \ t - size-divisor: 1; \ n \
  } \ n} \ n \ n @ media (min-large: 1200px) {\
  \ n: root {\ n \ t - size-divisor: .67; \ n} \ n} "
 retourner

Cette fonction, qui construit la nouvelle bibliothèque, commence par déclarer la variable CSS. Ensuite, il itère à travers toute l'ancienne bibliothèque à la recherche de mesures de pixels à l'échelle. Pour chacune des centaines de jetons qu'il trouve qui contiennent du PX, il évolue ce jeton. Au fur et à mesure que l'itération progresse, la fonction préserve la structure de ligne d'origine en rejoignant les jetons. Enfin, il ajoute les requêtes multimédias nécessaires et renvoie la bibliothèque entière en tant que cha?ne. Un peu de code pour exécuter les fonctions et lire et écrire à partir de fichiers termine le travail.

 Si __Name__ == '__MAIN__':
 f = open ('disposices_old.scss', 'r')
 scss = f.readlines ()
 f.close ()
 out = build_file (SCSS)
 f = open ('disposices_new.scss', 'w')
 F.Write (Out)
 f.close ()

Ce processus crée une nouvelle bibliothèque dans SASS. Pour créer le fichier CSS pour une utilisation finale, exécutez:

 sass disposices_new.scss dispositifs.css

Cette nouvelle bibliothèque propose les mêmes appareils, mais ils sont réactifs! C'est ici:

Pour lire le fichier de sortie réel, qui est des milliers de lignes, vérifiez-le sur GitHub.

Autres approches

Bien que les résultats de ce processus soient assez convaincants, c'était un peu de travail de les obtenir. Pourquoi n'ai-je pas adopté une approche plus simple? Voici trois autres approches avec leurs avantages et leurs inconvénients.

zoom

Une approche initialement prometteuse serait d'utiliser Zoom pour évoluer les appareils. Cela ferait uniformément le dispositif et pourrait être associé à des requêtes multimédias comme avec ma solution, mais fonctionnerait sans le calc () et la variable difficile.

Cela ne fonctionnera pas pour une raison simple: Zoom est une propriété non standard. Entre autres limitations, il n'est pas étayé dans Firefox.

Remplacer PX par EM

Une autre approche de découverte et de replacement prescrit le remplacement de toutes les instances de PX par EM. Ensuite, les appareils rétrécissent et se développent en fonction de la taille de la police. Cependant, les obtenir suffisamment petits pour s'adapter à un écran mobile peut nécessiter des tailles de police minuscules, plus petites que les navigateurs de tailles minimales, comme Chrome, appliquer. Cette approche pourrait également avoir des problèmes si un visiteur de votre site Web utilise une technologie d'assistance qui augmente la taille des polices.

Cela pourrait être traité en réduisant toutes les valeurs à un facteur de 100, puis en appliquant des tailles de police standard. Cependant, cela nécessite autant de prétraitement que l'approche de cet article, et je pense qu'il est plus élégant d'effectuer ces calculs directement plut?t que de manipuler les tailles de police.

échelle()

La fonction SCALE () peut modifier la taille des objets entiers. La fonction renvoie une , qui peut être donnée à un attribut de transformation dans un style. Dans l'ensemble, il s'agit d'une approche forte, mais ne modifie pas la mesure réelle du dispositif CSS. Je préfère mon approche, surtout lorsque je travaille avec des éléments d'interface utilisateur complexes rendus sur ?l'écran? de l'appareil.

Chris Coyier a préparé un exemple en utilisant cette approche.

En conclusion

Des centaines d'appels calc () pourraient ne pas être le premier outil que j'atteindrais si la mise en ?uvre de cette bibliothèque à partir de zéro, mais dans l'ensemble, il s'agit d'une approche efficace pour rendre les bibliothèques existantes redonnables. L'ajout de variables et de requêtes multimédias rend les objets réactifs. Si la bibliothèque sous-jacente était mise à jour, le script Python serait en mesure de traiter ces modifications en une nouvelle version de notre bibliothèque réactive.

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!