vue의 사용자 정의 레이아웃 (rem)

카탈로그
1.px와 뷰포트 2.%3. 미디어 쿼리 4.rem 5. vm/vh
1. rem 단위
우선rem 단위가 무엇인지 봅시다.rem는 브라우저에서 픽셀을 바꾸어 표시하는 유연하고 확장 가능한 단위입니다.em 단위와 달리,rem 단위는 플러그인 등급에 상관없이 브라우저의 루트 요소 (HTML 요소) 의 font-size에 비해만 적용됩니다.기본적으로 html 요소의 font-size는 12px이므로 다음과 같습니다.

1 rem = 12px

계산이 편리하도록 일반적으로 html의 font-size를 다음과 같이 설정할 수 있습니다.

html{ font-size: 67.5% }

이 경우
1 rem = 10px
2.rem를 통해 응답식 레이아웃 실현
rem 단위는 모두 뿌리 원소인 html의 font-size에 비해 크기를 결정한다. 뿌리 원소의 font-size는 하나의 기준을 제공하는 것과 같다. 페이지의 크기가 변할 때 font-size의 값만 바꾸면 rem를 고정 단위로 하는 원소의 크기도 응답하는 변화가 발생한다.
리액션을 통해 응답식 레이아웃을 실현하려면 보기 용기의 크기에 따라 font-size를 동적으로 바꾸면 됩니다.

function refreshRem() {
    var docEl = doc.documentElement;
    var width = docEl.getBoundingClientRect().width;
    var rem = width / 10;
    docEl.style.fontSize = rem + 'px';
    flexible.rem = win.rem = rem;
}
win.addEventListener('resize', refreshRem);

상기 코드에서 보기 용기를 10개로 나누고 font-size는 10분의 1의 너비로 표시한다. 마지막으로 헤더 탭에서 이 코드를 실행하면 font-size의 크기를 동태적으로 정의할 수 있다. 이로써 1rem는 서로 다른 시각 용기에서 서로 다른 크기를 표시하고rem 고정 단위로 서로 다른 용기 내 레이아웃의 적응을 실현할 수 있다.
3.rem2px와 px2rem
만약에 응답식 레이아웃에서rem 단위를 사용한다면 하나의 단위 환산 문제가 존재한다.rem2px는rem에서px로 환산하는 것을 나타낸다. 이것은 말할 것도 없다.rem에 해당하는 font-size의 크기를 곱하면 px로 환산할 수 있다.더 많은 응용 프로그램은 px2rem입니다. px에서rem로 전환하는 것을 의미합니다.
예를 들어 주어진 시각 원고는 750px (물리적 픽셀) 이고, 만약 우리가 모든 레이아웃 단위를rem로 표시하려면
비교적 멍청한 방법은 모든height와width 등 요소에 대해 상응하는 비율을 곱하여 현재 시각 원고를rem 단위로 환산한 다음에 하나하나rem로 표시하는 것이다.
또 다른 비교적 편리한 해결 방법은 css에서 우리는 px로 요소의 크기를 표시하고 마지막으로 css 코드를 작성한 후에 css 파일의 모든 px 단위를rem 단위로 바꾸는 것이다.
px2rem의 원리도 매우 간단하다. px 단위의 css 파일을 미리 처리하고 처리한 후에 모든 px를rem 단위로 바꾸는 데 중점을 두었다.두 가지 방법으로 수행할 수 있습니다.

<!--1） webpack loader   ：-->

npm install px2rem-loader

<!-- webpack      ：-->

module.exports = {
  // ...
  module: {
    rules: [{
      test: /\.css$/,
      use: [{
        loader: 'style-loader'
      }, {
        loader: 'css-loader'
      }, {
        loader: 'px2rem-loader',
        // options here
        options: {
          remUni: 75,
          remPrecision: 8
        }
      }]
    }]
  }
}

<!--2）webpack   postcss plugin-->

npm install postcss-loader

<!-- webpack plugin :-->

var px2rem = require('postcss-px2rem');

module.exports = {
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: "style-loader!css-loader!postcss-loader"
      }
    ]
  },
  postcss: function() {
    return [px2rem({remUnit: 75})];
  }
}

4.vue의rem 레이아웃
1) vue2 중

Vue-cli2.x의 사용법 1)lib-flexible

다운로드

npm i lib-flexible --save

2)  lib-flexible

<!-- main.js   lib-flexible-->
import 'lib-flexible/flexible'

3)  meta  

<!--  meta  ，            -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

4)  px2rem-loader

npm install px2rem-loader --save-dev

5. px2rem-loader 구성

<!-- build     util.js， px2rem-loader   cssLoaders -->
const cssLoader = {
    loader: 'css-loader',
    options: {
      minimize: process.env.NODE_ENV === 'production',
      sourceMap: options.sourceMap
    }
}
const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 75
    }
}

<!-- generateLoaders     px2remLoader-->

// generate loader string to be used with extract text plugin

  function generateLoaders (loader, loaderOptions) {
// const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]

var loaders = [cssLoader,px2remLoader]

if (loader) {
  loaders.push({
    loader: loader + '-loader',
    options: Object.assign({}, loaderOptions, {
      sourceMap: options.sourceMap
    })
  })
}

2) vue3의 사용법

lib-flexible：       dpr   ，  viewport html    font-size  rem              

1)  lib-flexible

yarn add lib-flexible 

2)  lib-flexible

<!-- main.js   lib-flexible-->
import 'lib-flexible/flexible'

pxtorem：    css px  rem  ，       
1）  postcss-pxtorem 

yarn add postcss-pxtorem 

2)   postcss-pxtorem 

<!--package.json ， postcss   -->
"postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-pxtorem": {
        "rootValue": 75 //       1/10,
        "propList":['*'],
        //           ， `hight`、`width`、`margin` ，`*`    
     }
    }
  }

1. pxtorem에서 무시하고 싶은 px를 대문자로 쓰면 됩니다. 예를 들어border:1PX solid #fff입니다.2,postcss-px2rem도 선택할 수 있습니다. 저는 pxtorem의 무시 방식을 더 좋아합니다. 제 vscode의beautify 자동 포맷 코드를 편리하게 합니다.3.rem 레이아웃의 단점은rem 단위를 통해 응답식 레이아웃을 실현할 수 있다. 특히 상응하는postcss 관련 플러그인을 도입하여 디자인 원고의 px에서rem까지의 계산을 면제한다.rem 단위는 외국의 일부 사이트에서도 사용된다. 여기서 말한 rem가 레이아웃을 실현하는 단점이나 작은 결함은 다음과 같다.
응답식 레이아웃에서 루트 요소인 font-size의 크기를 js를 통해 동적 제어해야 합니다.즉 css 스타일과 js 코드는 일정한 결합성을 가진다.또한 font-size를 바꾸는 코드를 css 스타일 앞에 두어야 합니다.