vue页面自适应屏幕分辨率,vue适配分辨率
这篇文章主要为大家详细介绍了Vue2.0实现自适应分辨率，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了Vue2.0实现自适应分辨率的具体代码，供大家参考，具体内容如下
1. 前台框架：Vue2.0 elementUI 2.15.7
2. 开发工具：对代码
3. 安装所需架包：
postcss-import: 12.0.1 ，
postcss-loader: 4.0.1 ，
postcss-pxtorem: ^5.1.1，
检查是否安装"灵活"架包，安装了需卸载或者取消引用，该架包文件会和修改过的"灵活"文件冲突。
4. 创建flexibleEx.js文件(该文件是修改灵活的架包的灵活。射流研究…文件，可以根据需求自行修改),放置在所需要的随意位置，如："/src/utils "目录下面。
然后将" flexibleEx.js "引入到" main.js "中，如：
导入@/utils/flexiblex。js
文件代码：
（函数(赢，赢){
var doc=win.document
var docEl=doc.documentElement
var meta El=doc。查询选择器( meta[name= viewport ])
var灵活El=doc。查询选择器( meta[name= flexible ])
var dpr=0
定义变量标度=0
var tid
var灵活=lib。灵活 (lib。灵活={ })
if (metaEl) {
console.warn(将根据已有的自指的标签来设置缩放比例)
var match=metaEl。getAttribute(content )。match(/initial\-scale=([\d\ .] )/)
如果（匹配){
scale=parseFloat(match[1])
dpr=parseInt(1 /标度)
}
} else if (flexibleEl) {
var内容=灵活El。获取属性(“内容”)
如果（内容){
var初始DPR=含量。匹配(/initial \-DPR=([\ d \ .] )/)
var最大DPR=含量。匹配(/最大值\-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))
}
}
}
如果(!dpr！缩放){
var isan droid=win。领航员。appversion。匹配(/Android/gi)
var isi phone=win。领航员。appversion。匹配(/iphone/gi)
var devicepixelrratio=win。设备像素比例
if (isIPhone) {
//iOS下，对于2和3的屏，用2倍的方案，其余的用一倍方案
if(devicepixelrratio=3(！dpr dpr=3)) {
dpr=3
} else if(devicepixelrratio=2(！dpr dpr=2)) {
dpr=2
}否则{
dpr=1
}
}否则{
//其他设备下，仍旧使用一倍的方案
dpr=1
}
比例=1/dpr
}
docEl.setAttribute(data-dpr ，dpr)
如果(!金属){
metaEl=doc.createElement(meta )
metaEl.setAttribute(name ， viewport )
metaEl.setAttribute(
内容，
初始比例=
规模
,最大规模=
规模
,最小刻度=
规模
,用户可扩展=否
)
if (docEl.firstElementChild) {
多西。第一个元素child。appendchild(metaEl)
}否则{
var wrap=doc.createElement(div )
wrap.appendChild(metaEl)
doc.write(wrap.innerHTML)
}
}
函数refreshRem() {
常量白名单=[
/管理看板，
/生产看板，
/控制板，
/main
] //不重定向白名单路由
var width=docel。getboundingclientrect().宽度
var rem=0
var hrefList=window。位置。href。拆分(/)
var URL=hrefList[hrefList。长度-1]
var url0=url.split(？)))
var urlEnd
if (url0.length 0) {
urlEnd=url0[0]
}
如果(!白名单。包括(/ urlEnd)){
如果(宽度/DPR=1980宽度/DPR 768){
宽度=1980 * dpr
rem=宽度/48
} else if (width/dpr=5760) {
宽度=5760 * dpr
rem=宽度/48
}否则{
宽度=540 * dpr
rem=宽度/20
}
docEl.style.fontSize=rem px
flexible.rem=win.rem=rem
}
}
win.addEventListener(
调整大小，
函数(){
清除超时(工贸署)
tid=setTimeout(refreshRem，300)
},
错误的
)
win.addEventListener(
插入的DOM节点，
函数(){
清除超时(工贸署)
tid=setTimeout(refreshRem，50)
},
错误的
)
win.addEventListener(
页面显示，
功能(e) {
如果(持久存在){
清除超时(工贸署)
tid=setTimeout(refreshRem，300)
}
},
错误的
)
如果(doc。就绪状态===完成){
医生。身体。风格。字体大小=12 * DPR 像素
}否则{
doc.addEventListener(
DOMContentLoaded ，
功能(e) {
医生。身体。风格。字体大小=12 * DPR 像素
},
错误的
)
}
refreshRem()
flexible.dpr=win.dpr=dpr
flexible.refreshRem=refreshRem
flexible.rem2px=function(d) {
var val=parseFloat(d) * this.rem
if(type of d=== string d . match(/rem $/)){
val=px
}
返回值
}
flexible.px2rem=function(d) {
var val=parseFloat(d)/this.rem
if(type of d=== string d . match(/px $/)){
瓦尔=雷姆
}
返回值
}
})(窗口，窗口[lib] (窗口[lib]={}))
5. 修改“build/utitls.js”文件，添加代码：
函数生成器加载器(loader，loaderOptions) {
常量加载器=选项。usepostcss？[CSS loader]:[CSS loader]；
如果(加载程序){
loaders.push({
loader: loader -loader ，
选项：Object.assign({}，loaderOptions，{
sourceMap: options.sourceMap
})
});
}
//当指定该选项时提取半铸钢钢性铸铁(Cast Semi-Steel)
//(这是生产构建期间的情况)
if (options.extract) {
返回提取文本插件。提取({
用途：装载机，
回退：“vue样式加载器",
公共路径： ././
});
}否则{
返回[ vue style-loader ].串联(加载器);
}
}
6. 修改更目录下面“postcssrc.js”
模块。导出={
插件：{
“自动修复程序”:
overrideBrowserslist: [
安卓4.1 ,
iOS 7.1 ，
铬合金31英尺，
法国法郎31 ,
ie=8
]
},
postcss-pxtorem :
根值：37.5,
属性列表：[*]
}
}
}
7. 注：界面自适应问题已经解决，但是界面呈现还会出现一些问题，现在需要自行修改异常界面，界面开发尽量使用rem，样式尽量不要使用内联样式，这些都需要手动修改
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。