页面自适应lib-flexible使用

迷南。 2023-02-22 08:21 12阅读 0赞

## 1.安装flexible ##

npm install lib-flexible --save

## 2.引入flexible ##

在项目入口文件main.js中添加如下代码，引入flexible

import 'lib-flexible'

## 3.px 转 rem ##

使用 webpack 的 px2rem-loader,自动将px转换为rem

## 4.安装px2rem-loader ##

npm install px2rem-loader --save

## 5.配置px2rem-loader ##

在vue-cli生成的文件中,找到以下文件 build/utils.js,如下图添加配置

const cssLoader = { 
       loader: 'css-loader',
       options: { 
       	 //这一行为加上去的
         minimize: process.env.NODE_ENV === 'production',
         sourceMap: options.sourceMap
       }
     }
     //这段为加上去的
     const px2remLoader = { 
       loader: 'px2rem-loader',
       options: { 
         remUnit: 192 //根据视觉稿，rem为px的十分之一，移动端使用750/10为75，PC端使用1920/10为192
       }
     }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020070217363313.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw==,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，12人围观）

还没有评论，来说两句吧...

相关阅读

相关页面自适应lib-flexible使用

1.安装flexible npm install lib-flexible --save 2.引入flexible 在项目入口文件main.js中添加如下

迷南。/ 2023年02月22日 08:21/ 0 赞/ 13 阅读

相关设置echarts随页面大小变化自适应

在项目中应用做echarts可视化图表,图表时会碰到需求是echarts会随着游览器的放大，缩小自适应。其实很简单，只要一点点代码就可以了。 var myChart=

柔光的暖阳◎/ 2022年11月01日 13:54/ 0 赞/ 457 阅读

相关 html页面高度自适应的特点,css如何高度自适应浏览器高度？

高度自适应就是高度能跟随浏览器窗口的大小改变而改变，典型的运用在一些后台界面中上面一栏高度固定用作菜单栏或导航栏，下面一栏高度自适应用于显示内容。 ![682b19391f3

悠悠/ 2022年10月06日 08:00/ 0 赞/ 355 阅读

相关总结iframe高度自适应，自适应子页面高度

在网上找了很多iframe的高度自适应，发现很多兼容性都不是很好，于是自己总结了一下。页面html节点上要有 <!DOCTYPE html PUBLIC "-//W3C

怼烎@/ 2022年07月24日 10:07/ 0 赞/ 329 阅读

相关页面自适应

屏幕自适应 @media ( max-width :320px)\{\} @media ( min-width :321px) and ( max-widt

蔚落/ 2022年07月11日 01:49/ 0 赞/ 229 阅读

相关 iframe父页面自适应子页面的高度

我们一般情况下是在子页面获取高度传递给父页面，但是由于存在跨域问题，解决起来不是很方便而 [html5 postMessage解决跨域、跨窗口消息传递][html5 pos

系统管理员/ 2022年04月11日 12:22/ 0 赞/ 447 阅读

相关页面根据不同宽度自适应不同样式

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] @media screen and (min-w

忘是亡心i/ 2022年01月14日 22:09/ 0 赞/ 290 阅读

相关页面自适应标签设置

viewport：它在页面中设置，是应对手机模式访问网站、网页对屏幕而做的一些设置。通常手机浏览器打开页面后，会把页面放在一个虚拟的“窗口”–这个比窗口大，也就是你常发现

阳光穿透心脏的1/2处/ 2021年12月23日 12:55/ 0 赞/ 237 阅读

相关如何实现自适应页面 (响应式布局)

> 当我们在做网页时，应当充分考虑到网页自适应的问题 > > 否则可能会出现同一个网页在不同的屏幕尺寸上排版布局混乱的情况方案一：用比例控制大小 1. 在

╰半橙微兮°/ 2021年12月17日 09:39/ 0 赞/ 481 阅读

相关 JQuery中添加水印并且根据页面自适应

.导入watermark.js文件，内容如下 function watermark(settings) { //默认设置 var defaultSett...

亦凉/ 2021年04月27日 15:13/ 0 赞/ 2520 阅读