设计稿1980 * 1080 安装依赖 "postcss-pxtorem": "^6.0.0" vue.config.js 中配置 代码如下： css: {loaderOptions: {postcss: {postcssOptions:{plugins: [//require(postcss-pxtorem)({rootValue: 16,selectorBlackList: [weui, mu], // 忽…

<meta charset"utf-8" name"viewport" content"widthdevice-width, initial-scale0.1, maximum-scale5.0"> 将上面代码放入head中即可

自适应布局 * midea 媒体布局 * flex 布局 * %百分比布局 * rem 布局 * vw、vh 布局 局部自适应 接手他人的项目&#xff0c;把某个页面改为自适应的&#xff0c;若用插件&#xff0c;就要动配置文件&#xff0c;导致 全部的页面都要检查和调整&#xff0c;代价大。 根据…

目录 第一步&#xff1a;安装插件第二步&#xff1a;装好之后在main.js 里引入 lib-flexible第三步&#xff1a; 在vue.config.js 中添加配置第四步&#xff1a;设置flexible.js的宽度根据屏幕大小自动适配&#xff0c; 修改flexible.js 文件&#xff0c;&#xff08;全局搜索 …

最终效果 : 切换任意屏幕缩放尺寸 , 拖动屏幕也自适应 存在的问题 : 前段时间我给父盒子flex , 子盒子min-widthflex:1 这样实现了PC端自适应 , 但存在一定的问题 , 因为通过给子盒子的宽度固定值 , 当屏幕缩放放大后总不能完全兼顾 , 效果不够完美 简而言之 , 存在以下这样的问…

安装依赖包 npm i lib-flexible --save npm install px2rem-loader 引入 在main.js中引入 import "lib-flexible/flexible" 修改flexible.js文件 在项目下的node_modules\lib-flexible路径找到flexible.js文件进行修改 function refreshRem(){var width doc…

vue项目实现大屏PC端字体自适应 我们字体自适应选择使用rem作为单位&#xff0c;通过监听窗口大小的变化&#xff0c;更新1rem的对应的px数来实现字体自适应。 注意该方法&#xff0c;我们需要在APP.vue文件中实现&#xff0c; 首先APP.vue文件中&#xff0c;定义屏幕宽度的…

PC端的自适应方式有以下几种&#xff1a; 1. 响应式网页设计&#xff08;Responsive Web Design&#xff09;&#xff1a;根据设备的屏幕尺寸和分辨率自动调整页面布局和元素大小&#xff0c;适应不同大小的屏幕。 优点&#xff1a; 1.1.1面对不同分辨率设备时&#…