vue의 사용자 정의 레이아웃 (vm/vh)

카탈로그
1.px와 뷰포트 2.%3. 미디어 쿼리 4.rem 5. vm/vh
1. vw/vh의 정의
css3에 새로운 단위 vw/vh가 도입되었습니다. 보기 창과 관련이 있습니다. vw는 보기 창의 넓이를 나타내고 vh는 보기 창의 높이를 나타냅니다. vw와 vh를 제외하고 vmin과 vmax 두 개의 관련 단위도 있습니다.각 단위의 구체적인 의미는 다음과 같다.
여기서 우리는 창문의 넓이가 모두 100vw/100vh라는 것을 발견했다. 그러면 vw 또는 vh는 약칭 vw로 백분율 단위와 매우 유사하다.vw와%의 차이점은 다음과 같습니다.
비교를 통해 우리는 vw 단위와 백분율이 유사하다는 것을 알 수 있다. 단지 확실한 차이가 있다. 앞에서 우리는 백분율 단위의 환산이 어렵다고 소개했는데 이곳의 vw는'이상적인 백분율 단위'와 더욱 비슷하다.
임의의 등급 요소로 vw 단위를 사용하는 상황에서 1vw는 모두 보기 너비의 1% 와 같다.
2. vw 단위 환산
px를 vw 단위로 환산하려면, 보기의 창 크기 (배치 뷰포트) 를 정하고, 배치 뷰포트를 해상도 크기로 설정하면 됩니다.예를 들어 아이폰6/7 375*667의 해상도에 대해 px는 다음과 같은 방식으로 vw로 환산할 수 있다.

  1px = （1/375）*100 vw

또한postcss의 상응하는 플러그인을 통해 css를 미리 처리하여 자동 변환을 할 수 있고postcss-px-to-viewport는 자동으로 px를 vw로 변환할 수 있다.postcss-px-to-viewport의 기본 매개 변수는 다음과 같습니다.

var defaults = {
  viewportWidth: 320,
  viewportHeight: 568, 
  unitPrecision: 5,
  viewportUnit: 'vw',
  selectorBlackList: [],
  minPixelValue: 1,
  mediaQuery: false
};

창의 너비와 높이, 그리고 환산 정밀도를 지정하면 px를 vw로 바꿀 수 있습니다.
3. vw/vh 단위의 호환성
가능https://caniuse.com/각 버전의 브라우저가 vw 단위에 대한 지원성을 보십시오.
우리는 절대 다수의 브라우저가 vw 단위를 지원하는 것을 발견했다.
4. vh 플러그인postcss-viewport-units를 다운로드할 때 위조 선택기를 사용하여 발생하는 문제

<!--  .postcssrc.js    -->
module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    // "autoprefixer": {},
      "postcss-aspect-ratio-mini": {},
      "postcss-write-svg": {
          utf8: false
      },
      "postcss-cssnext": {},
      "postcss-px-to-viewport": {
        //      ，            ，      750，   pc      1920     
          viewportWidth: 1920,
          viewportHeight: 1080,    //      ，      
          unitPrecision: 3,       //   `px`             （        ）
          viewportUnit: 'vw',    //             ，    vw
          //             class  ，     ，      ,             
          selectorBlackList: ['.ignore', '.hairlines'],  
          minPixelValue: 1,      //      `1px`        ，            
          mediaQuery: false      //           `px`
      },
      <!--postcss-viewport-units":{}     -->"
      <!--   ::after ::before    -->
      "postcss-viewport-units":{
          filterRule: rule => rule.selector.indexOf('::after') === -1 &&
          rule.selector.indexOf('::before') === -1 &&
          rule.selector.indexOf(':after') === -1 &&
          rule.selector.indexOf(':before') === -1
      },
      "cssnano": {
          preset: "default", //    default     autoprefixer
          "postcss-zindex": false
      }
  }
}

vh를 사용하면 모든 일반div 탭에 콘텐츠 속성을 추가하지만, 위조 선택기에 콘텐츠를 추가하면 표시됩니다. 필터 함수를 설정하면: after::before 등을 피할 수 있습니다.
vw/vh 레이아웃을 사용하여 다른 방안보다 적응을 실현하고 화면 조절 문제를 완벽하게 해결할 수 있습니다

vue의 사용자 정의 레이아웃 (vm/vh)

좋은 웹페이지 즐겨찾기