vue가 모바일 화면 적응을 위해 rem을 사용하는 방법(코드 포함)

이 글의 내용은 vue가 모바일 화면 적응을 위해 (코드 포함) 렘을 사용하는 방법에 대한 것입니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

rem을 모바일 단말에 적용해서 사용하고 싶다면 먼저 이 글을 읽어주셔야 합니다. less를 설정하신 후 rem을 사용하시면 됩니다

프로젝트가 거의 완성되어 rem을 사용하지 않고 사용하고 싶으시다면 rem을 사용하면 이 트릭을 사용할 수 있습니다.

postcss-pxtorem: px를 rem으로 변환하는 플러그인

postcss-pxtorem

설치postcss-pxtorem

npm install postcss-pxtorem --save

新建rem.js文件

const baseSize = 32
// 设置 rem 函数
function setRem () {
  // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
  const scale = document.documentElement.clientWidth / 750
  // 设置页面根节点字体大小
  document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
  setRem()
}

并引用进main.js文件内

import './rem'

修改.postcssrc.js 文件

在.postcssrc.js文件内的 plugins 添加以下配置，配后就可以在开发中直接使用 px

    "postcss-pxtorem": {
      "rootValue": 32,
      "propList": ["*"]
    }

새 rem.js 파일 만들기

<template>
  <div class="hello">
    test
  </div>
</template>

<script>
  export default {
    name: &#39;HelloWorld&#39;,
    data() {
      return {
        msg: &#39;Welcome to Your Vue.js App&#39;
      }
    }
  }
</script>

<style scoped>
  .hello {
    text-align: center;
    font-size: 20px;
    width: 300px;
    height: 400px;
    background:red;
  }
</style>

main.js 파일에 참조하세요

rrreee

.postcssrc에서 <code>.postcssrc.js 파일

을 수정하세요. .js 파일

plugins 다음 구성을 추가하면 px 🎜rrreee🎜helloworld.vue🎜🎜🎜rrreee🎜🎜 유닛에서 개발한 후 바로 개발에 사용할 수 있습니다. 🎜효과🎜🎜🎜🎜

위 내용은 vue가 모바일 화면 적응을 위해 rem을 사용하는 방법(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!