Mobile Projekte werden automatisch in rem konvertiert

Dieses Mal werde ich Ihnen die automatische Konvertierung mobiler Projekte in rem vorstellen. Was sind die Vorsichtsmaßnahmen für die automatische Konvertierung mobiler Projekte in rem? Hier ist ein praktischer Fall, schauen wir uns das an.

Ich glaube, dass viele Freunde ihre mobilen Projekte automatisch in REM konvertieren möchten, was dem Front-End-Trend entspricht. Es ist sehr umständlich und fehleranfällig, Änderungen per Handschrift oder Editor-Plug-Ins vorzunehmen . Ich bin online, habe viele Möglichkeiten gesucht und die folgenden Probleme gefunden:

1 Ich bin dem alten Video-Tutorial gefolgt und habe festgestellt, dass die verschiedenen Plug-in-Versionen von Node NPM Webpack px2rem unterschiedlich und nutzlos sind

2 Online Das Tutorial fehlte und war unvollständig, und es hat lange gedauert, bis ich es herausgefunden habe. Ich habe darüber nachgedacht, die CSSREM-Einstellungen von vscode manuell festzulegen, war aber immer noch nicht überzeugt, also habe ich alles zusammengesetzt und Ich habe es endlich herausgefunden. Ich hoffe, dass die folgenden Methoden für alle hilfreich sein werden, um rem automatisch auf mobilen Endgeräten zu erstellen

1 Ich werde nicht näher auf die Installation von vue-cli eingehen, jeder sollte es wissen

2 px2rem-loader installieren und konfigurieren (hier habe ich viele Probleme ohne Postcss ausprobiert, mich aber für dieses entschieden)

Schritt eins: npm install px2rem-loader

Teil zwei: Hinzufügen Objekte unter webpack.base.conf.js, hier verwende ich sass. Befolgen Sie einfach die folgenden Regeln.

module.exports={
module: {
  rules: [
   {
    test: /\.(css|less|scss)(\?.*)?$/,
    loader: 'style-loader!css-loader!sass-loader!less-loader!postcss-loader'
   }
  ]
 }
}

Schritt 3: Fügen Sie den Plugins unten etwas hinzu webpack.dev.conf.js. Das Attribut von remUnit ist im Fall von Apple 5. Ich habe es hier auf 40 eingestellt, und einige Leute haben es auf 80 eingestellt. Die 40 hier ist für die Verwendung bestimmt hotcss. Ich werde über den vierten Teil von

 plugins: [
  new webpack.LoaderOptionsPlugin({
   // webpack 2.0之后， 此配置不能直接写在自定义配置项中， 必须写在此处
   vue: {
    postcss: [require('postcss-px2rem')({ remUnit: 40, propWhiteList: [] })]
   }
  }
 ]

sprechen: Viele Leute wissen das nicht. Finden Sie const cssLoader unter utils.js und fügen Sie ?importLoaders=1

 const cssLoader = {
  loader: 'css-loader?importLoaders=1',
  options: {
   minimize: process.env.NODE_ENV === 'production',
   sourceMap: options.sourceMap
  }
 }

Bis zu diesem Punkt ist die Installation abgeschlossen

Schriftgröße eingeben:40px

Schriftgröße ausgeben:1rem (unter iPhone)

3 Wir alle Wir wissen, dass das Pixelverhältnis der Geräte unterschiedlich ist, daher verwenden wir Hotcss, um das Pixelverhältnis des Gerätelink anzupassen

Ich füge es in src/assets/js/ ein. Sie können

Methoden einführen Je nach Ihren Gewohnheiten können Sie hotcss.js in viewport.js ändern Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie das Vuex-Projektstrukturverzeichnis und die Konfiguration

Wenden Sie Angular2 und gemeinsam genutzte Module an

Das obige ist der detaillierte Inhalt vonMobile Projekte werden automatisch in rem konvertiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!