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;


相关文章
|
3月前
|
存储 NoSQL 前端开发
美团面试:手机扫描PC二维码登录,底层原理和完整流程是什么?
45岁老架构师尼恩详细梳理了手机扫码登录的完整流程,帮助大家在面试中脱颖而出。该过程分为三个阶段:待扫描阶段、已扫描待确认阶段和已确认阶段。更多技术圣经系列PDF及详细内容,请关注【技术自由圈】获取。
|
9月前
|
编解码 JavaScript 前端开发
vue cli3 PC端适配
【8月更文挑战第12天】
117 3
|
11月前
|
PHP
驾校在线考试系统源码 手机+PC+平板自适应
Thinkphp在线考题源码 驾校在线考试系统 手机+PC+平板 自适应,机动车驾驶培训学校驾校类网站源码带手机端 运行环境:php+mysql
285 11
驾校在线考试系统源码 手机+PC+平板自适应
|
10月前
|
存储 JavaScript 数据安全/隐私保护
vue实战——登录【详解】(含自适配全屏背景,记住账号--支持多账号,显隐密码切换,登录状态保持)
vue实战——登录【详解】(含自适配全屏背景,记住账号--支持多账号,显隐密码切换,登录状态保持)
119 1
|
10月前
|
SQL NoSQL 关系型数据库
若依修改02,若以提供了多种版本,RuoYi-Cloud和SpringBoot+Vue都是PC端的,如果想要适配手机端,用Uniapp+vue,导入Mysql和启动Redis
若依修改02,若以提供了多种版本,RuoYi-Cloud和SpringBoot+Vue都是PC端的,如果想要适配手机端,用Uniapp+vue,导入Mysql和启动Redis
|
10月前
|
人工智能 自然语言处理 Android开发
无法拒绝!GPT-4o 完美适配az手机,畅享丝滑体验
无法拒绝!GPT-4o 完美适配az手机,畅享丝滑体验
121 0
|
10月前
|
Web App开发 编解码
软件开发常见流程之兼容性和手机屏页面设计,PC端和移动端常见浏览器,国内的UC都是根据Webkit修改过来的内核,开发重点关注尺寸,常见移动端尺寸汇总,移动端,理想视口根据你设别的样式进行修改
软件开发常见流程之兼容性和手机屏页面设计,PC端和移动端常见浏览器,国内的UC都是根据Webkit修改过来的内核,开发重点关注尺寸,常见移动端尺寸汇总,移动端,理想视口根据你设别的样式进行修改
|
11月前
|
JavaScript
技术心得:根据不同访问设备跳转到PC页面或手机页面
技术心得:根据不同访问设备跳转到PC页面或手机页面
139 0
|
移动开发 前端开发
ruoyi-nbcio-plus基于vue3的flowable为了适配文件上传改造VForm3的代码记录
ruoyi-nbcio-plus基于vue3的flowable为了适配文件上传改造VForm3的代码记录
274 1
|
12月前
|
iOS开发
iPad适配
iPad适配
152 0

热门文章

最新文章