// 不要使用這種方式引入rem嘁字,因?yàn)閕mport 這種導(dǎo)入的作用是把碎片化的文件合并到一起,刷新頁(yè)面時(shí)址儒,會(huì)報(bào)找不到document錯(cuò)誤演训,這是ssr渲染造成的問(wèn)題。
import '~/assets/js/rem.js'
正確的引入方式:
在 static 目錄下汁咏,建立 js/rem.js 文件亚斋。
我們應(yīng)該使用 script 標(biāo)簽在html 頁(yè)面引入 rem.js 文件,但 nuxtjs 中沒(méi)有 html 頁(yè)面攘滩,所以我們需要寫(xiě)在 nuxt.config.js 中帅刊。
在 nuxt.config.js 文件中:
head: {
script:[
{type:"text/javascript", src: '/js/rem.js', async: true, defer: true },
{type:"text/javascript",src:"https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"}//引入線上的js文件
]
},
config 頁(yè)面中 head 屬性中所描述的文件,都直接在 static 中查找漂问。
nuxtjs 沒(méi)有所謂的 index.html 入口頁(yè)赖瞒,這個(gè) index.html 實(shí)際是有 nuxt.config.js 編譯而成的。
iscroll 级解、swiper iview等插件冒黑,也應(yīng)該用此種方式引入。
rem.js文件分享:
// 隔離作用域勤哗,避免全局變量的污染
!(function(){
function setHtmlFontSize(){
// 1.獲取手機(jī)屏幕寬度
var w = document.documentElement.getBoundingClientRect().width; //如果用window.innerwidth的話抡爹,改變窗口大小,不能夠及時(shí)獲取窗口大小
// console.log(w);
// 2.根據(jù)屏幕寬度計(jì)算html font-size大小, 7.5指的是設(shè)計(jì)稿的寬度為750芒划,如果在公司中設(shè)計(jì)稿的尺寸為720冬竟,那么應(yīng)該除以7.2
var f = w/40;
// 3.設(shè)置html 的font-szie
document.documentElement.style.fontSize=f+"px";
}
setHtmlFontSize();
window.addEventListener("resize",function(){
// setTimeout 是為了解決在蘋(píng)果手機(jī)上的閃屏情況
setTimeout(function(){
setHtmlFontSize();
},300)
})
})();