前端vue适配不同的分辨率,vue页面自适应屏幕分辨率

　　主要介绍Vue实现PC端分辨率适配的样例代码，非常详细，有一定的参考价值。感兴趣的朋友可以参考一下。

方案

　　lib-灵活的px2remLoader

　　Lib-flexible:阿里的可扩展布局方案

　　2 px rem-loader: px到rem

安装依赖

　　npm安装px2rem-loader -D

　　npm安装库-灵活-S

引入依赖

　　Main.js引入lib-flexible

　　导入灵活库

px转换成rem

　　vue-loader和其他样式文件加载器的选项最终都是由build/utils.js中的方法生成的我们只需要在cssLoader后面加一个px2remLoader。px2rem-loader的remUnit选项表示1rem=多少像素。结合lib-flexible的方案，我们将px2remLoader的options.remUnit设置为设计稿宽度的1/10，假设设计稿宽度为1920px。

　　在build/utils.js中添加px2remLoader

　　const cssLoader={

　　加载程序： css-loader ，

　　选项：{

　　sourceMap: options.sourceMap

　　}

　　//添加代码，px到rem配置(px2remloader需要添加到loaders数组)

　　const px2remLoader={

　　加载程序： px2rem-loader ，

　　选项：{

　　RemUnit: 192，//根据目测稿，rem是px的十分之一，1920px 192 rem。

　　//remPrecision: 8//转换后的rem保留几个小数点。

　　}

　　将它放入加载器数组中

　　//生成用于提取文本插件的加载器字符串

　　函数生成器加载器(loader，loaderOptions) {

　　const loaders=options . usepostcss？[cssLoader，postcssLoader，px2remLoader] : [cssLoader，px2remLoader]

　　if(加载程序){

　　loaders.push({

　　装载机：装载机-装载机，

　　选项：Object.assign({}，loaderOptions，{

　　sourceMap: options.sourceMap

　　})

　　}

　　//.

　　}

修改flexible.js

　　搜索全球flexible.js

　　修改代码以适应PC端代码。

　　函数refreshRem(){

　　var width=docel . getboundingclientrect()。宽度；

　　如果(宽度/dpr 540) {

　　宽度=宽度* dpr

　　}

　　//缩放比例，可以根据实际情况修改

　　var rem=宽度/8；

　　docel . style . font size=rem px ；

　　flexible . rem=win . rem=rem；

　　}

　　对于不想转换的样式，可以加上/*no*/来保证不会被转换。

参考博客

　　Vupc端适配解决方案灵活px2remLoader感谢老大哥

　　Vue实现PC端分辨率适配，感谢大榭

　　本文关于Vue PC端分辨率适配的样例代码到此为止。关于Vue PC端分辨率适配的更多信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。