在App.vue文件中直接放入以下代码即可 <template><div id"app"><router-view></router-view></div> </template> <script> export default {data() {return {};},mounted: function () {// 页面开始加载时修改font-sizev…

公司项目做之前没有沟通好&#xff0c;按照1920*1080设计图做的页面&#xff0c;缩放比是100%&#xff0c;项目做完之后说要适配缩放比&#xff0c;并且工控屏&#xff08;分辨率1024*768&#xff09;&#xff0c;需要做小屏适应。 开发中一般pc端都是不用怎么考虑去适配屏幕的…

网上有很多Vue3.0 + vite 自适应PC端的文章，我也尝试过其他方式，只有这种方式在我项目中没出现各种各样的问题。遂，先把这种方式记录下来，以下是步骤： 1、下载包 npm install lib-flexible-computer postcss-px2rem px2rem-loader --save 2、在main.ts里引入 import …

设计稿1980 * 1080 安装依赖 "postcss-pxtorem": "^6.0.0" vue.config.js 中配置 代码如下&#xff1a; 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端自适应 , 但存在一定的问题 , 因为通过给子盒子的宽度固定值 , 当屏幕缩放放大后总不能完全兼顾 , 效果不够完美 简而言之 , 存在以下这样的问…