vue 專案設定移動端rem

第一種直接設定

fnresize()

;window.onresize = function (
)function fnresize()
// 禁止雙擊放大
document.documentelement.
addeventlistener
('touchstart'
, function (event)},
false);
var lasttouchend =0;
document.documentelement.
addeventlistener
('touchend'
, function (event)
lasttouchend = now;},
false
);

;import router from './router'

import fnresize from './util/setrem'

// import "./plugins/element.js"

import elementplus from 'element-plus'

;import 'element-plus/lib/theme-chalk/index.css'

;fnresize

use(router)

use(elementplus)

mount()

使用中直接將設計圖中的px/100,就是所需的rem值

第二種使用sass在計算

1在index.html中新增

var dpr = window.devicepixelratio;

var meta = document.
createelement
('meta');
// dpr
meta.
setattribute
('content'
,'initial-scale='+1
/ dpr +
', maximum-scale='+1
/ dpr +
', minimum-scale='+1
/ dpr +
', user-scalable=no');
document.
getelementsbytagname
('head')[
0].(meta)
;// rem
document.
addeventlistener
('domcontentloaded'
, function (e)
,false
);

"scss"

>
$ue-width:
750;
@function px2rem
($px)
rem;
} count

export

default
else};
if(!doc.addeventlistener)
return
; win.
addeventlistener
(resizeevt, recalc,
false);
doc.
addeventlistener
('domcontentloaded'
, recalc,
false);
}}

import setrem from "../utils/setrem"

;setrem.
setremfn
(document, window)

JS PC端設定rem 移動端設定rem

window.onresize function 頁面剛重新整理時呼叫 init function init const basesize 32function setrem 初始化 setrem window.onresize function 這裡是乙個pc和h5的 rem樣式 寫在了乙個htm...

移動端布局rem設定函式

designwidth 設計稿的實際寬度值，需要根據實際設定 maxwidth 製作稿的最大寬度值，需要根據實際設定 這段js的最後面有兩個引數記得要設定，乙個為設計稿實際寬度，乙個為製作稿最大寬度，例如設計稿為750，最大寬度為750，則為 750,750 function designwidth...

移動端字型設定rem。和相容。

一 做少部分手機適配可以用px。二 當要適配各種手機端裝置時用rem。二 1.使用rem來設定web頁面的字型大小 2.rem是相對於根元素 3.rem能等比例適配所有螢幕 4.在根元素中定義了乙個基本字型大小為62.5 也就是10px。設定這個值主要方便計算，如果沒有 設定，將是以 16px 為基...