美文网首页
vue2中通过来适配大屏分辨率,做到自适应(二)

vue2中通过来适配大屏分辨率,做到自适应(二)

作者: 甘道夫老矣 | 来源:发表于2023-09-21 15:42 被阅读0次

1.通过插件安装

//把全局的px换成rem
npm install amfe-flexible --save

//vue2版本的一定要5.1.1,要不然就g
npm install postcss-pxtorem@5.1.1 --save-dev

2.项目里会有一个.postcssrc.js文件, 或者 postcss.config.js,没有就创建


module.exports = {
    "plugins": {
        "postcss-import": {},
        "postcss-url": {},
        // to edit target browsers: use "browserslist" field in package.json
        "autoprefixer": {},
        'postcss-pxtorem': {
            rootValue: 192, //一般是设计宽的1/10
            propList: ['*']
        }
    }
}

3.main.js引入转换rem的插件

import 'amfe-flexible';

注意注意:以上操作是可以做到适配的,切记切记一点,代码一定要写规范,最好是一开始就合理的安装1920*1080设计图上所有尺寸来写,包括嵌套div的时候如果不设置宽度高度页面也会畸形,比如一个div是200px,另一个如果不知道,那么就要calc(100% - 200px)一定要等分100%尺寸,否则也会畸形

参考大佬文献:https://www.cnblogs.com/zhurong/p/14011857.html

相关文章

  • 技术文章汇总

    横竖屏适配 字体大小适配 Cell 高度自适应

  • Andorid屏幕分辨率和适配规则

    在《iPhone屏幕分辨率和适配规则(基础篇)》,《iPhone屏幕分辨率和适配规则(规则篇)》和《iPhone屏...

  • 关于大屏利用rem自适应

    功课传送门:大屏上的全屏页面的自适应适配方案 rem 方案 rem (font size of the root ...

  • 大屏总结

    转为rem 大屏最重要的就是分辨率适配问题,对此我们可以将每个页面中的元素设置为rem来完成页面内元素长宽设置,但...

  • 大屏可视化问题

    大屏显示的最终分辨率受限于: 大屏本身支持的最大分辨率 用来投屏的电脑支持的最大分辨率 连接电脑和大屏硬件中间线路...

  • 移动h5自适应布局

    移动h5自适应布局 问题一,分辨率Resolution适配:不同屏幕宽度,html元素宽高比和字体大小,元素之间的...

  • iOS 字体规范和多屏适配

    一.字体多屏适配 分辨率与像素(分辨率单位是程序所说的单位——点即pt,像素为真实Pixel) 1.iphone4...

  • iOS开发屏幕适配

    Hello,简书! ## iOS开发屏幕适配 ## 屏幕适配原则大屏手机显示更多的内容 - 并不是大屏手机就根据屏...

  • iPhone屏幕分辨率和视频规则(实现篇)

    在文章《iPhone屏幕分辨率和适配规则(基础篇)》和《iPhone屏幕分辨率和适配规则(规则篇)》中,讲了iPh...

  • 数据可视化大屏 前端屏幕多分辨率适配方案(vue,echarts

    数据可视化大屏 前端屏幕多分辨率适配方案(vue,echarts) 写在前面:第一次写博客, csdn账号注册很久...

网友评论

      本文标题:vue2中通过来适配大屏分辨率,做到自适应(二)

      本文链接:https://www.haomeiwen.com/subject/wddkudtx.html