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…

因为在做超市POS收银系统的时候&#xff0c;遇到需要适配不同的PC端的分辨率&#xff0c;原来PC还能做自适应的呀&#xff0c;感觉发现了新大路&#xff0c;于是打算做一下笔记。 当然我在做的过程中也借鉴了其他大佬的写的&#xff0c;如&#xff1a; https://blog.csdn.net…

1.npm i lib-flexible-computer -S //根节点会根据页面视口变化而变化font-size大小 安装这个的话就不需要下面flexible文件修改了 2.yarn add px2rem-loader -D&#xff1a;px 转 rem 3.yarn add postcss-px2rem-exclude -D&#xff1a; 将代码中px自动转化成对应的rem的一…