最终效果 : 切换任意屏幕缩放尺寸 , 拖动屏幕也自适应 存在的问题 : 前段时间我给父盒子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作为单位，通过监听窗口大小的变化，更新1rem的对应的px数来实现字体自适应。 注意该方法，我们需要在APP.vue文件中实现， 首先APP.vue文件中，定义屏幕宽度的…

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

第一步,引入vue文件中js代码 <script> // 单独设置jsrem适配文件 // 根标签文字大小 当前设备宽度 / 基数 function setFontSize () {// 确定基数const i 80// 获取设备const htmlClient document.documentElement// 设备宽度let htmlWidth htmlClient.offsetWidth…

pc端自适应 使用amfe-flexible 和 postcss-px2rem依赖包 步骤: 1.安装依赖包 npm install amfe-flexible -S npm install postcss-px2rem -S2.在main.js中引入 import lib-flexible3.在vue.config.js中配置 remUnit是根据设计稿自定义的&#xff0c;用设计稿尺寸/10&#xff…

手机的屏幕比较小&#xff0c;宽度通常在600像素以下&#xff1b;PC的屏幕宽度&#xff0c;一般都在1000像素以上&#xff08;目前主流宽度是1366768&#xff09;&#xff0c;有的还达到了2000像素。同样的内容&#xff0c;要在大小迥异的屏幕上&#xff0c;都呈现出满意的效果…

使用的方案 lib-flexible-computer px2remLoader postcss-px2rem lib-flexible&#xff1a;阿里可伸缩布局方案 px2rem-loader&#xff1a;px 转 rem postcss-px2rem&#xff1a; 将代码中px自动转化成对应的rem的一个插件下面这个插件会代替lib-flexible 更好一些 适用于pc…