移動端 頁面適配
阿新 • • 發佈:2018-12-18
1.js 原生
;(function(win, doc) { change() function change() { var remSize = window.innerWidth / 7.5 || 50 /*設計稿是以width = 750px 為基準的*/ document.querySelector('html').style.fontSize = (remSize > 100 ? 100 : remSize) + 'px' } win.addEventListener('resize', change, false) win.addEventListener( 'orientationchange', change, false ) /* 這個是移動端裝置橫屏、豎屏轉換時觸發的事件處理函式 */ })(window, document)
這個在vue專案中也可使用,直接在主入口檔案index.html中寫入,或者你可以將其封裝為一個js方法,在mian.js文中引入
import 'XX.js' /*必須放在最前面引入*/
2.使用外掛 lib-flexible
1.安裝外掛 lib-flexible
npm i lib-flexible --save
2 .在main.js中引入lib-flexible
import 'lib-flexible/flexible'
3 .安裝px2rem loader
npm install px2rem-loader
4 .配置px2rem-loader
在build檔案中找到util.js,將px2rem-loader新增到cssLoaders中,如:
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75
}
}
我之前將這個配置錯寫為
const px2remLoader = {
loader: 'px2rem-loader',
options: 75
}
結果報錯為: 同時,在generateLoaders方法中新增px2remLoader
function generateLoaders (loader, loaderOptions) { const loaders = [cssLoader, px2remLoader] if (options.usePostCSS) { loaders.push(postcssLoader) }
5.此時配置已經完成,接下來看看使用 在這裡,我們設定了一個div的寬度是200px,