Shulou(Shulou.com)06/02 Report--

This article mainly explains "Vue2.0 how to achieve adaptive resolution", the content of the explanation is simple and clear, easy to learn and understand, now please follow the editor's ideas slowly in depth, together to study and learn "Vue2.0 how to achieve adaptive resolution" bar!

1. Foreground frame: Vue2.0+elementUI 2.15.7

two。 Development tool: vs code

3. Install the required rack package:

"postcss-import": "12.0.1"

"postcss-loader": "4.0.1"

"postcss-pxtorem": "^ 5.1.1"

Check to see if the "flexible" rack package is installed and needs to be uninstalled or unreferenced. The rack package file will conflict with the modified "flexible" file.

4. Create a flexibleEx.js file (the flexible.js file that modifies the flexible rack package, which can be modified according to your needs), and place it in any location you need, such as "/ src/utils" directory.

Then introduce "flexibleEx.js" into "main.js", such as:

Import'@ / utils/flexibleEx.js'

File code:

(function (win) Lib) {var doc = win.document var docEl = doc.documentElement var metaEl = doc.querySelector ('doc.querySelector [name = "flexible"]') var dpr = 0 var scale = 0 var tid var flexible = lib.flexible | | (lib.flexible = {}) if (metaEl) {console.warn ('will set the scale based on the existing meta tag') var match = metaEl. GetAttribute ('content') .match (/ initial\-scale= ([\ d\.] +) /) if (match) {scale= parseFloat (match [1]) dpr= parseInt (1 / scale)}} else if (flexibleEl) {var content = flexibleEl.getAttribute (' content') if (content) {var initialDpr = content.match (/ initial\-dpr= ([\ d\.] +) /) Var maximumDpr = content.match (/ maximum\-dpr= ([\ d\.] +) if (initialDpr) {dpr= parseFloat (initialDpr [1]) scale = parseFloat ((1 / dpr). ToFixed (2))} if (maximumDpr) {dpr= parseFloat (maximumDpr [1]) scale = parseFloat ((1 / dpr). ToFixed (2)} If (! dpr & &! scale) {var isAndroid = win.navigator.appVersion.match (/ android/gi) var isIPhone = win.navigator.appVersion.match (/ iphone/gi) var devicePixelRatio = win.devicePixelRatio if (isIPhone) {/ / iOS For screens 2 and 3, double the scheme and the rest if (devicePixelRatio > = 3 & & (! dpr | | dpr > = 3)) {dpr = 3} else if (devicePixelRatio > = 2 & & (! dpr | | dpr > = 2)) {dpr = 2} else {dpr = 1} else {/ / other devices Still use twice the scheme dpr = 1} scale= 1 / dpr} docEl.setAttribute ('data-dpr', dpr) if (! metaEl) {metaEl = doc.createElement (' meta') metaEl.setAttribute ('name',' viewport') metaEl.setAttribute ('content',' initial-scale=' + scale +', maximum-scale=' + scale +' Minimum-scale=' + scale +', user-scalable=no') if (docEl.firstElementChild) {docEl.firstElementChild.appendChild (metaEl)} else {var wrap = doc.createElement ('div') wrap.appendChild (metaEl) doc.write (wrap[ XSS _ clean])} function refreshRem () {const whiteList = [' / managementKanban','/ productionKanban','/ controlBoard' '/ main'] / / do not redirect whitelist routes var width = docEl.getBoundingClientRect (). Width var rem = 0 var hrefList = _ window.location.href.split (' /') var url = hrefList [hrefList.length-1] var url0 = url.split ('?') Var urlEnd if (url0.length > 0) {urlEnd = url0 [0]} if (! whiteList.includes ('/'+ urlEnd)) {if (width / dpr 768) {width = 1980 * dpr rem = width / 48} else if (width / dpr > = 5760) {width = 5760 * dpr rem = width / 48} else {width = 540 * dpr Rem = width / 20} docEl.style.fontSize = rem + 'px' flexible.rem = win.rem = rem}} win.addEventListener (' resize' Function () {clearTimeout (tid) tid = setTimeout (refreshRem, 300)}, false) win.addEventListener ('DOMNodeInserted', function () {clearTimeout (tid) tid = setTimeout (refreshRem, 50)}, false) win.addEventListener (' pageshow', function (e) {if (e.persisted) {clearTimeout (tid) tid = setTimeout (refreshRem) False) if (doc.readyState = 'complete') {doc.body.style.fontSize = 12 * dpr +' px'} else {doc.addEventListener ('DOMContentLoaded', function (e) {doc.body.style.fontSize = 12 * dpr +' px'} False)} refreshRem () flexible.dpr = win.dpr = dpr flexible.refreshRem = refreshRem flexible.rem2px = function (d) {var val = parseFloat (d) * this.rem if (typeof d = = 'string' & & d.match (/ rem$/)) {val + =' px'} return val} flexible.px2rem = function (d) {var val = parseFloat (d) / this.rem if ( Typeof d = = 'string' & & d.match (/ px$/)) {val + =' rem'} return val}}) (window Window ['lib'] | | (window [' lib'] = {}))

5. Modify the "build/utitls.js" file to add code:

Function generateLoaders (loader, loaderOptions) {const loaders = options.usePostCSS? [cssLoader]: [cssLoader]; if (loader) {loaders.push ({loader: loader + "- loader", options: Object.assign ({}, loaderOptions, {sourceMap: options.sourceMap})) } / / Extract CSS when that option is specified / / (which is the case during production build) if (options.extract) {return ExtractTextPlugin.extract ({use: loaders, fallback: "vue-style-loader", publicPath: ".. /... /"});} else {return ["vue-style-loader"] .concat (loaders);}}

6. Modify "postcssrc.js" under the change directory

Module.exports = {plugins: {'autoprefixer': {overrideBrowserslist: [' Android 4.1, 'iOS 7.1,' Chrome > 31,'ff > 31,'ie > = 8']} 'postcss-pxtorem': {rootValue: 37.5, propList: ['*']}}

7. Note: the problem of interface adaptation has been solved, but there will still be some problems in interface presentation. Now you need to modify the abnormal interface, use rem as much as possible in interface development, and avoid inline styles as far as possible, all of which need to be modified manually.

Thank you for your reading, the above is the content of "how to achieve adaptive resolution in Vue2.0". After the study of this article, I believe you have a deeper understanding of how to achieve adaptive resolution in Vue2.0, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.