Maison > interface Web > tutoriel CSS > le corps du texte

css px automatiquement converti en rem

PHPz
Libérer: 2017-04-04 13:40:32
original
2447 Les gens l'ont consulté

En tant que développeur front-end, en particulier lors de l'adaptation de terminaux mobiles, rem est une unité que nous utilisons souvent. Vous pouvez rechercher ses avantages en ligne.
Mais lorsque nous convertissons les px du brouillon de conception en rem, nous devons le calculer manuellement. C'est un processus très long et laborieux. Existe-t-il un moyen de nous « libérer » ? (Pardonnez ma paresse ~)

1. Processeur CSS

Les processeurs tels que Sass, LESS et PostCSS peuvent tous le gérer.

Sass (implémenté à l'aide de la fonction de Sass et de macros hybrides) :
@function px2em($px, $base-font-size: 16px) {
  @if (unitless($px)) {
    @warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels for you";
    @return px2em($px + 0px); // That may fail.
  } @else if (unit($px) == em) {
    @return $px;
  }
  @return ($px / $base-font-size) * 1em;
}
Copier après la connexion
Sass (à l'aide des macros hybrides de Sass) :
@mixin px2rem($property,$px-values,$baseline-px:16px,$support-for-ie:false){
  //Conver the baseline into rems
  $baseline-rem: $baseline-px / 1rem * 1;
  //Print the first line in pixel values
  @if $support-for-ie {
    #{$property}: $px-values;
  }
  //if there is only one (numeric) value, return the property/value line for it.
  @if type-of($px-values) == "number"{
    #{$property}: $px-values / $baseline-rem;
  }
  @else {
    //Create an empty list that we can dump values into
    $rem-values:();
    @each $value in $px-values{
      // If the value is zero or not a number, return it
      @if $value == 0 or type-of($value) != "number"{
        $rem-values: append($rem-values, $value / $baseline-rem);
      }
    }
    // Return the property and its list of converted values
    #{$property}: $rem-values;
  }
}
Copier après la connexion

Pour Avec la méthode ci-dessus, nous devons apprendre des règles d'écriture supplémentaires telles que sass, et également la configurer. Bien que ce soit très simple, cela peut-il être plus simple ?

2.CSSREM

C'est un plug-in écrit par flashlizi pour du texte sublime Il est vraiment pratique à utiliser ! Nous pouvons le voir sur GitHub.

Permettez-moi de vous présenter comment le configurer ci-dessous :

2.1 Nous pouvons télécharger les fichiers dépendants sur GitHub
2.2 Ouvrez Sublime Text et entrez dans le répertoire des packages (Sublime Text - > Préférences -> Parcourir les packages);
2.3 Placez le dossier cssrem-master dans le répertoire ouvert à l'étape précédente et redémarrez le texte sublime pour prendre effet ; test :
Créez un nouveau fichier .css :
我们也可以修改默认配置:
打开cssrem-master文件夹下的cssrem.sublime-settings文件,进行修改
{
    "px_to_rem": 40, //px转rem的单位比例,默认为40
    "max_rem_fraction_length": 6, //px转rem的小数部分的最大长度。默认为6。
    "available_file_types": [".css", ".less", ".sass",".html"]
    //启用此插件的文件类型。默认为:[".css", ".less", ".sass"]
}
Copier après la connexion



css px automatiquement converti en rem11.png

Appuyez sur la touche de tabulation pour obtenez les résultats suivants :


css px automatiquement converti en rem22.png

N'est-ce pas très pratique ? Venez l'essayer~

Enfin, Attached est un microsite : utilisez flexible.
js

pour implémenter l'adaptation aux appareils mobiles.

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!