首页 > 其他分享 >vue3屏幕适配

vue3屏幕适配

时间:2024-07-31 16:31:38浏览次数:13  
标签:amfe 适配 px rem vue3 minPixelValue 屏幕

通过两个插件来实现  postcss-pxtorem 和   amfe-flexible

 在main.js 中 导入

import "amfe-flexible";

在vite.config.js中配置

  css: {
    postcss: {
      plugins: [
        postcssPxtoRem({
          rootValue: 192, // 根据使用的ui组件? 定义根元素大小?
          unitPrecision: 5,
          propList: ['*', "!border"], //可以从px更改为rem的属性
          selectorBlackList: ['.norem', "ignore"], // 过滤掉.norem-开头的class,不进行rem转换
          // minPixelValue: 12, ///设置要替换的最小像素值,px小于12的不会被转换
          minPixelValue: 1, // 设置要替换的最小像素值
          // exclude: ["node_modules"], //转换的时候排除
          replace: true,
          mediaQuery: false,

        })
      ]
    }
  }

 

 

标签:amfe,适配,px,rem,vue3,minPixelValue,屏幕
From: https://www.cnblogs.com/lxsunny/p/18334911

相关文章

  • 在Vue3中创建动态主题切换功能
    随着现代Web开发的进步,用户体验变得愈发重要。在这方面,实现动态主题切换功能无疑是提高用户体验的有效方式。通过动态主题切换,用户可以根据自己的喜好选择明亮的主题或暗色主题,提供了更个性化、更舒适的使用体验。今天,我们将通过一个简洁的示例来展示,如何在Vue3中实现动态......
  • Vue3 - 最新详细实现网站内部打开预览 office 全套附件,在页面弹窗内解析预览 word文档
    前言如果您需要Vue2版本,请访问这篇文章。在vue3|nuxt3项目开发中,详解实现项目内部“打开解析预览各种office文档”通用预览插件,支持弹出一个窗口在弹框内预览或者直接显示在页面某个div容器里面,解析预览word文档、excel电子表格、ppt演示文稿、pdf文档、txt文......
  • Android开发 - (适配器)Adapter类中ArrayAdapter实现类详细解析
    作用将数组数据映射到UI组件(如ListView、Spinner等)上的角色。它是BaseAdapter的一个子类,专门用于处理简单的数据集合,如数组或列表。ArrayAdapter简化了数据到视图映射的过程,使得开发者能够以更少的代码实现数据的展示。它的主要作用为以下几点:数据绑定:它能够将一组数据......
  • 这本vue3编译原理开源电子书,初中级前端竟然都能看懂
    前言众所周知vue提供了很多黑魔法,比如单文件组件(SFC)、指令、宏函数、cssscoped等。这些都是vue提供的开箱即用的功能,大家平时用这些黑魔法的时候有没有疑惑过一些疑问呢。我们每天写的vue代码一般都是写在*.vue文件中,但是浏览器却只认识html、css、js等文件类型,明显是不认......
  • [vue3] Vue3源码阅读笔记 reactivity - collectionHandlers
    源码位置:https://github.com/vuejs/core/blob/main/packages/reactivity/src/collectionHandlers.ts这个文件主要用于处理Set、Map、WeakSet、WeakMap类型的拦截。拦截是为了什么?为什么要处理这些方法?Vue3实现响应式的思路是使用ProxyAPI在getter中收集依赖,在setter触发更新......
  • [vue3] Vue3源码阅读笔记 reactivity - collectionHandlers
    源码位置:https://github.com/vuejs/core/blob/main/packages/reactivity/src/collectionHandlers.ts这个文件主要用于处理Set、Map、WeakSet、WeakMap类型的拦截。拦截是为了什么?为什么要处理这些方法?Vue3实现响应式的思路是使用ProxyAPI在getter中收集依赖,在setter触发更新......
  • 横竖屏切换,按home键,按返回键,锁屏与解锁屏幕,跳转透明Activity界面,启动一个 Theme
    A->B横竖屏切换:A走完ondestory才会走B的onCreate--会走pause按home键:本质上就是普通开B按返回键:也是开B但是会走关A锁屏与解锁屏幕:普通跳转透明Activity界面:会走pause但是不会走onstop启动一个Theme为Dialog的Activity:会onPause不会stop弹出Dialog时A......
  • Unity 摄像机跟随人物、人物走到地图边缘摄像机停止平移、手指长按屏幕摄像机平移
    1.摄像机跟随人物首先,你需要一个脚本来控制摄像机跟随人物。这个脚本应该附加到你的摄像机对象上。CameraFollow.csusingUnityEngine;publicclassCameraFollow:MonoBehaviour{publicTransformtarget;//指向你的人物对象publicfloatsmoothSpeed......
  • 【RK3568】点亮eDP屏幕+双屏异显
    一、驱动eDP屏幕    一般来说,屏幕的规格书中会找到屏幕的相关参数,如没有,也可直接找屏幕厂商要,首先打开屏幕的规格书,搜索EDIDTable,可找到如下信息:    (1)显示时序配置        将这些参数对应到设备树中,即可完成下面修改,关键节点就是显示时序配置的d......
  • Vue3实战案例 知识点全面 推荐收藏 超详细 及附知识点解读
    最近经常用到vue中的一些常用知识点,打算系统性的对vue3知识点进行总结,方便自己查看,另外也供正在学习vue3的同学参考,本案例基本包含Vue3所有的基本知识点,欢迎参考,有问题评论区留言,谢谢。本项目主要还是四个章节目录1.项目结构创建2.页面组件的划分3.页面组件实现3.1N......