vue.js가 모바일 적응을 구현하는 방법-View.js-php.cn

vue.js가 모바일 적응을 구현하는 방법

coldplay.xixi

풀어 주다： 2020-11-30 16:31:57

원래의

3532명이 탐색했습니다.

Vue.js 모바일 단말기 적응 구현 방법: 1. rem 레이아웃을 사용하고 기본 입구 [index.html] 및 [
] 태그에 관련 JS 코드를 추가합니다. 2. [lib-flexible] 플러그를 사용합니다. - 성취하다.

vue.js가 모바일 적응을 구현하는 방법

이 튜토리얼의 운영 환경: windows7 시스템, vue2.9 버전 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.

【관련 추천 글 : vue.js】

vue.js 모바일 적응 구현 방법 :

1. 방법 1 : 메인 입구의 rem 레이아웃

: index.html, < ;head> 태그에 다음 JS 코드를 추가합니다. (표준 375px 너비 적응에서 달성, 100px = 1rem.)

  <script>
    (function () {
      // 在标准 375px 适配下，100px = 1rem;
      var baseFontSize = 100;  
      var baseWidth = 375;
      var set = function () {
        var clientWidth = document.documentElement.clientWidth || window.innerWidth;
        var rem = 100;
        if (clientWidth != baseWidth) {
          rem = Math.floor(clientWidth / baseWidth * baseFontSize);
        }
        document.querySelector(&#39;html&#39;).style.fontSize = rem + &#39;px&#39;;
      }
      set();
      window.addEventListener(&#39;resize&#39;, set);
    }());
   
  </script>

로그인 후 복사

2. 방법 2: lib-flexible 플러그인 구현

npm i lib-flexible --save        // 载lib-flexible
npm install px2rem-loader        // 安装px2rem-loader

로그인 후 복사

2. main.js

import &#39;lib-flexible/flexible&#39;

로그인 후 복사

3에 lib-flexible을 추가합니다. index.html에 추가: 모바일 적응 메타 태그

<meta name="viewport" content="width=device-width,initial-scale=1.0">
//注意这两个的区别，建议添加下面的meta，反正点击输入框，页面自动缩放
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

로그인 후 복사

4 구성을 변경합니다

build/util.js에서 다음 두 가지를 변경합니다.

(1), cssLoaders

const cssLoader = {
    loader: &#39;css-loader&#39;,
    options: {
      minimize: process.env.NODE_ENV === &#39;production&#39;,
      sourceMap: options.sourceMap
    }
  }
  const px2remLoader = {
    loader: &#39;px2rem-loader&#39;,
    options: {
      //一般设置75
      remUnit: 35
    }
  }

로그인 후 복사

에 px2rem-loader를 추가하고, generateLoaders 메소드에 px2remLoader를 추가합니다

  function generateLoaders(loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader] : [cssLoader,px2remLoader]
    if (loader) {
      loaders.push({
        loader: loader + &#39;-loader&#39;,
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }
    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: &#39;vue-style-loader&#39;
      })
    } else {
      return [&#39;vue-style-loader&#39;].concat(loaders)
    }
  }

로그인 후 복사

수정할 위치를 요약합니다

vue.js가 모바일 적응을 구현하는 방법

5. 재시작

npm run dev // 다시 실행

여기서 주의할 점:

1. lib-flexible: rem용 적응 플러그인입니다. (예: 750px == 10rem)

2. px2rem-loader: CSS 작성 시 편의상 px를 입력하면 자동으로 rem으로 변환됩니다.

3. 'px2rem-loader' 플러그인을 사용하다 보면 rem 변환이 잘못된 경우가 발견되는 경우가 있습니다. 개발 도구가 다른 플러그인 변환을 설정했을 수도 있습니다. 다른 플러그인 변환을 원하는 변환으로 설정하기만 하면 됩니다. [이전에 만난 적이 있어요, 거대한 구덩이요. . . ]