vue專案中做移動適配

在用vue或react等工具搭建乙個移動端專案時,怎樣做到自適應呢? 當然選擇rem布局比較方便快捷.

此處已vue為例,在使用vue-cli搭建好專案框架後,在目錄結構的index.html檔案中新增一段js**:

fnresize();

window.onresize = function () 
function fnresize() 
if (devicewidth <= 320) 
document.documentelement.style.fontsize = (devicewidth / 7.5) + 'px';
}

這裡設定的比例是100px=1rem,

例如:寬度為100px時,可以直接寫成1rem

Vue移動端專案中使用echarts

npm i echarts s 引入 import echarts from echarts 註冊 vue.prototype.echarts echarts 獲取需要生成圖表的元素 以下是一些常用的配置引數 都有寫明詳細的注釋 initchart splitarea 縱向背景區域 axistick...

Vue移動端螢幕適配

第一步 在src路徑下新建乙個js資料夾，在建立乙個resize.js檔案 第二部 在resize.js檔案內寫入以下 function doc,win if doc.addeventlistener return domcontentloaded是firefox下特有的event,當所有dom解析...

vue 移動端適配vant

下面我們分別將這兩個工具配置到專案中完成 rem 適配。一 使用 lib flexible 動態設定 rem 基準值 html 標籤的字型大小 1 安裝 npm i amfe flexible2 然後在 main.js 中載入執行該模組 import amfe flexible 二 使用 postc...