vueプロジェクトではremを使用して、入り口のファイルに内容を追加します。
vue-cliを使ってプロジェクトフレームを構築した後、ディレクトリ構造のindex.ファイルにjsコードを追加します。
ここで設定した比率は20 px=1 remです。
例えば、幅が100 pxの場合、直接5 remと書くことができます。
vue-cliを使ってH 5プロジェクトを開発するには、rem適合が必要です。以下は2つのよく使われる方法(750の設計原稿を例にして)を提供します。
方法1:index.またはmain.jsに以下のコードを追加します。
方法2:lib-flexibleとpx 2 rem-loaderを使って自動変換する。
1、プラグインのインストール
npm install lib-flexible--save
npm install px 2 rem-loader--save-dev
2、プラグインの設定
エントランスファイルのmain.jsにlib-flexibleを導入する:
build/utils.jsファイルにpx 2 rem-loaderを配置する:
lib-flexibleとpx 2 remをインストールして配置した後、プロジェクトを再起動してから、自動的にpxをremに変換することができます。
インラインのpxスタイルは自動的に変換できません。
また、pxの書き方は少し違っていますが、px 2 rem公式の紹介を参考にして、簡単に紹介してください。
1.直接pxを書いて、コンパイルしたら直接remに転化します。次の二つの場合を除いて、他の長さはこれを使います。
2.pxの後に/*no*/を追加し、pxに変換せず、そのまま出力します。一般的なborderはこれを使います。
3.pxの後に/*px*/を追加すると、dprによって三つのコードが生成されます。一般的なfont-sizeはこれを使います。
サンプルコードは以下の通りです。
<script>
window.onload = function () {
var setRem = function () {
// UI
var uiWidth = 1200;
//
var winWidth = document.documentElement.clientWidth;
//
var rate = winWidth / uiWidth;
// html
document.documentElement.style.fontSize = rate * 20 + "px"
};
setRem();
window.onresize = function () {
setRem();
}
}
</script>
cssを書いています。px単位をremに変えられます。ここで設定した比率は20 px=1 remです。
例えば、幅が100 pxの場合、直接5 remと書くことができます。
(function (doc, win) {
let fn = () => {
let docEl = doc.documentElement,
clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 16 * (clientWidth / 1920) + 'px';
}
if (!doc.addEventListener) return;
win.addEventListener('resize', fn);
doc.addEventListener('DOMContentLoaded', fn);
})(document, window);
知識を補充します:vueの中でrem配置の2種類の方法を使います。vue-cliを使ってH 5プロジェクトを開発するには、rem適合が必要です。以下は2つのよく使われる方法(750の設計原稿を例にして)を提供します。
方法1:index.またはmain.jsに以下のコードを追加します。
const setHtmlFontSize = () => {
const htmlDom = document.getElementsByTagName('html')[0];
let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
if (htmlWidth >= 750) {
htmlWidth = 750;
}
if (htmlWidth <= 320) {
htmlWidth = 320;
}
htmlDom.style.fontSize = `${htmlWidth / 7.5}px`;
};
window.onresize = setHtmlFontSize;
setHtmlFontSize();
注:ここで設定した比率は100 px=1 remです。例えば、要素幅が100 pxの場合は、直接に1 remと書くことができます。方法2:lib-flexibleとpx 2 rem-loaderを使って自動変換する。
1、プラグインのインストール
npm install lib-flexible--save
npm install px 2 rem-loader--save-dev
2、プラグインの設定
エントランスファイルのmain.jsにlib-flexibleを導入する:
build/utils.jsファイルにpx 2 rem-loaderを配置する:
lib-flexibleとpx 2 remをインストールして配置した後、プロジェクトを再起動してから、自動的にpxをremに変換することができます。
インラインのpxスタイルは自動的に変換できません。
また、pxの書き方は少し違っていますが、px 2 rem公式の紹介を参考にして、簡単に紹介してください。
1.直接pxを書いて、コンパイルしたら直接remに転化します。次の二つの場合を除いて、他の長さはこれを使います。
2.pxの後に/*no*/を追加し、pxに変換せず、そのまま出力します。一般的なborderはこれを使います。
3.pxの後に/*px*/を追加すると、dprによって三つのコードが生成されます。一般的なfont-sizeはこれを使います。
サンプルコードは以下の通りです。
/* */
.selector {
width: 150px;
height: 64px; /*px*/
font-size: 28px; /*px*/
border: 1px solid #ddd; /*no*/
}
/* */
.selector {
width: 2rem;
border: 1px solid #ddd;
}
[data-dpr="1"] .selector {
height: 32px;
font-size: 14px;
}
[data-dpr="2"] .selector {
height: 64px;
font-size: 28px;
}
[data-dpr="3"] .selector {
height: 96px;
font-size: 42px;
}
以上のvueプロジェクトではremを使って、入り口のファイルに内容を追加します。つまり、小編集は皆さんに全部の内容を共有しています。参考にしてもらいたいです。よろしくお願いします。