Vue适配PC+大屏,手机+ipad适配

简介: Vue适配PC+大屏,手机+ipad适配

PC+大屏适配


可适配 1400px以上的屏幕


image.png


查看演示


项目地址


设置设计稿-转换rem


我们的设计稿是3840px宽度,所以widthOfDesignLayout设置3840


module.exports = {
    plugins: {
        autoprefixer: {},
        "@njleonzhang/postcss-px-to-rem": {
            unitToConvert: "px",
            widthOfDesignLayout: 3840, // 设计稿的宽度 ,就是设计的UI宽度
            unitPrecision: 3, // 十进制的单位.
            selectorBlackList: [".ignore", ".hairlines"], // 过滤那些不用转换的class
            minPixelValue: 1, // 设置要替换的最小像素值.
            mediaQuery: false, // 允许在媒体查询中转换px
        },
    },
};


设置根节点字体


在main.js下,保证在屏幕缩放的过程中也是16:9的比列,查看该插件


const dashboardFlexible = require('lib-flexible-for-dashboard');
dashboardFlexible.init(16/9)

开发


image.png

设计给出多少就是多少


button {
    width: 465px;
    height: 112px;
}


手机+ipad适配



可适配手机+ipad


演示地址


项目地址


转换Rem


css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require("postcss-pxtorem")({
                        rootValue: 75, // 换算的基数 1rem = 75px 这个是根据750px设计稿来的,如果是620 的就写 62
                        // 忽略转换正则匹配项。插件会转化所有的样式的px。比如引入了三方UI,也会被转化。目前我使用selectorBlackList字段,来过滤
                        //如果个别地方不想转化px。可以简单的使用大写的 PX 或 Px 。
                        selectorBlackList: ['van-'],
                        propList: ["*"], // 需要做转化处理的属性,如`hight`、`width`、`margin`等,`*`表示全部
                    }),
                ],
            },
        },
    },


设置根节点字体


import 'lib-flexible'


开发


设计给的是750px的设计稿 是多少填多少,比如这个框的高度是96px就直接写96px


image.png


设计稿是多少就是多少


height: 72px;
background: rgba(238, 238, 238, 0.5);
border-radius: 36px;


相关文章
|
4月前
|
JavaScript NoSQL Redis
Vue中实现修改邮箱、手机号等流程的大致过程、验证码由后端的redis生成验证(版本1.0)
这篇文章记录了在Vue中实现修改手机号和邮箱的大致流程,包括使用过滤器部分隐藏展示的手机号和邮箱,以及通过点击触发路由跳转的便捷方式。文章还描述了旧号码和新号码验证的界面实现,其中验证码由后端生成并通过弹窗展示给用户,未来可以接入真正的手机验证码接口。此外,还提供了修改邮箱的页面效果截图,并强调了学习是一个永无止境的过程。
Vue中实现修改邮箱、手机号等流程的大致过程、验证码由后端的redis生成验证(版本1.0)
|
4月前
|
JavaScript 数据安全/隐私保护
Vue中如何使用过滤器来隐藏手机号、邮箱等字符串的中间部分内容
这篇文章介绍了在Vue中如何使用过滤器来隐藏手机号和邮箱等字符串的中间部分内容,以提高隐私保护。文章展示了实现效果,并提供了实现过程的代码示例,包括HTML部分的绑定、data部分的数据定义和script部分的过滤器定义。文章还解释了过滤器的概念、语法和使用方式,并提供了一个外部链接供读者获取更加详细的过滤器知识。
|
3月前
|
vr&ar 图形学 UED
电子沙盘VR模型大屏平板手机微信使用方案
数字孪生电子沙盘和VR模型被广泛应用在房地产等行业,为不同设备定制不同版本的模型是常见做法。然而,通过实时云渲染技术,可以将PC端的VR模型转化为网页版,使用户能够在平板或手机上流畅浏览详细信息,无需开发多个版本。这不仅提升了用户体验,还简化了模型提供商的工作流程,降低了成本。尤其在新楼盘发布时,可通过公众号或广告链接快速吸引潜在客户。成本主要取决于并发用户数及显卡性能要求,但该技术显著提高了跨设备访问的便利性。
56 1
|
5月前
|
缓存 开发框架 前端开发
循序渐进VUE+Element 前端应用开发(32)--- 手机短信动态码登陆处理
循序渐进VUE+Element 前端应用开发(32)--- 手机短信动态码登陆处理
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的多功能智能手机阅读APP的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的多功能智能手机阅读APP的详细设计和实现(源码+lw+部署文档+讲解等)
|
5月前
|
JavaScript 前端开发 数据安全/隐私保护
vue 前端 邮箱、密码、手机号码等输入验证规则
vue 前端 邮箱、密码、手机号码等输入验证规则
416 0
|
5月前
|
SQL NoSQL 关系型数据库
若依修改02,若以提供了多种版本,RuoYi-Cloud和SpringBoot+Vue都是PC端的,如果想要适配手机端,用Uniapp+vue,导入Mysql和启动Redis
若依修改02,若以提供了多种版本,RuoYi-Cloud和SpringBoot+Vue都是PC端的,如果想要适配手机端,用Uniapp+vue,导入Mysql和启动Redis
|
5月前
|
人工智能 自然语言处理 Android开发
无法拒绝!GPT-4o 完美适配az手机,畅享丝滑体验
无法拒绝!GPT-4o 完美适配az手机,畅享丝滑体验
48 0
|
28天前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
1月前
|
JavaScript 前端开发 开发者
vue 数据驱动视图
总之,Vue 数据驱动视图是一种先进的理念和技术,它为前端开发带来了巨大的便利和优势。通过理解和应用这一特性,开发者能够构建出更加动态、高效、用户体验良好的前端应用。在不断发展的前端领域中,数据驱动视图将继续发挥重要作用,推动着应用界面的不断创新和进化。