ホームページ > 記事 > ウェブフロントエンド > vue がモバイル画面の適応に rem を使用する方法 (コード付き)
この記事の内容は、vue がモバイル画面の適応にどのように使用するかについてです (コード付き)。必要な友人が参考になれば幸いです。
モバイル端末に rem を適応させて使用したい場合は、最初にこの記事を読む必要があります。less を設定した後、rem を使用できます。
プロジェクトがほぼ完了している場合。開発された場合、rem を再度使用するには、このトリックを使用します。
postcss-pxtorem: px を rem に変換するプラグイン
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": ["*"] }helloworld.vue
<template> <div class="hello"> test </div> </template> <script> export default { name: 'HelloWorld', data() { return { msg: 'Welcome to Your Vue.js App' } } } </script> <style scoped> .hello { text-align: center; font-size: 20px; width: 300px; height: 400px; background:red; } </style>effect
以上がvue がモバイル画面の適応に rem を使用する方法 (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。