집 > 기사 > 웹 프론트엔드 > 모바일 프로젝트는 자동으로 rem으로 변환됩니다.

모바일 프로젝트는 자동으로 rem으로 변환됩니다.

php中世界最好的语言원래의: 2018-06-11 10:17:062289검색

이번에는 모바일 프로젝트를 rem으로 자동 변환하는 방법을 알려드리겠습니다. 모바일 프로젝트를 rem으로 자동 변환할 때 주의할 점은 무엇인가요? 다음은 실제 사례입니다.

많은 친구들이 모바일 프로젝트를 자동으로 렘으로 변환하길 원한다고 생각하는데, 이는 프런트엔드 트렌드에 맞춰 손글씨나 편집기 플러그인으로 변경하는 것이 매우 불편하고 오류가 발생하기 쉽습니다. 이 방법은 다음과 같은 문제를 발견했습니다.

1 이전 비디오 튜토리얼을 따라갔더니 node npm webpack px2rem의 다양한 플러그인 버전이 다르고 전혀 쓸모가 없다는 것을 발견했습니다.

2 온라인 튜토리얼이 부족합니다. 불완전하고 헷갈려서 오랫동안 파악을 못해서 vscode에서 cssrem을 수동으로 설정할까도 고민했지만, 그래도 확신이 없어서 종합해서 결국 다음과 같은 방법을 생각해냈습니다. . 모바일 단말기에서 모든 사람의 자동 rem 구성에 도움이 되기를 바랍니다. 도움말

1 vue-cli 설치에 대해 자세히 설명하지 않겠습니다. 모두가 알아야 합니다.

2 px2rem-loader 설치 및 구성(postcss는 그렇지 않습니다. 여기에서 사용하다가 많은 문제를 겪었지만 이것을 사용하기로 결정했습니다. 1단계: npm install px2rem-loader

2부: webpack.base.conf.js 아래에 객체를 추가하고 여기서는 다른 객체를 사용하여 변경합니다. 다음 규칙에 따라 모든 사람이 이해할 수 있다고 믿습니다.

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

3단계: webpack.dev.conf.js 아래의 플러그인에 무언가를 추가합니다. Apple 5의 경우 remUnit 속성에 주의해야 합니다. 저는 여기서 40으로 설정했고 어떤 사람들은 80으로 설정했습니다. 여기서 40은 hotcss와 일치하기 위한 것입니다. 아래에서

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

의 네 번째 부분에 대해 이야기하겠습니다. 이것은 많은 사람들이 모르는 것입니다. 이 단계를 놓치세요. utils.js에서 const cssLoader를 찾아 ?importLoaders=1

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

를 추가하세요.

입력 글꼴 크기:40px

출력 글꼴 크기:1rem(iPhone에서)

3 우리 모두는 기기의 픽셀 비율이 다르다는 것을 알고 있으므로 hotcss를 사용하여 기기의 픽셀 비율 링크를 조정합니다

Me src/assets/js/에 있는 방법을 소개하면 됩니다. 어떤 이름이든 직접 정의할 수 있습니다. 여기서는 hotcss.js를 viewport.js

module.exports = {
 entry: {
  app: './src/main.js',
  rem: './src/assets/js/viewport.js'
 }
}

로 변경했습니다. 이 방법으로 완료되었습니다.

이 기사의 경우 방법을 숙지하셨습니다. 흥미로운 정보가 있으니 PHP 중국어 웹사이트의 다른 관련 기사도 주목해 주세요!