vue cli3适配所有端方案的实现

网络编程 发布日期：2024/9/21 浏览次数：1

正在浏览：vue cli3适配所有端方案的实现

应用场景

页面需要在pc端和移动端同时兼容，以前我的方案都是使用媒体查询来判断当前设备大小，然后写两套或者三套css代码来兼容他们，能达到目的，并且效果不错，但是感觉还是稍微麻烦了一丢丢。后面了解了一下flexable.js脚本，稍作修改，基本可以满足我的需求。

postcss-px2rem

yarn add postcss-px2rem

postcss-px2rem插件可以将px转为rem,需要在vue.config.js(项目没有的话就手动创建一个)中配置插件

// css相关配置
  css: {
    // 启用 CSS modules
    modules: false,
    // 是否使用css分离插件
    extract: true,
    // 开启 CSS source maps"color: #ff0000">flexible.js


flexible会为页面根据屏幕自动添加标签，动态控制initial-scale，maximum-scale，minimum-scale等属性的值 ===>设备缩放比


所以，在我们的html的header中，就不要之前配置的viewport的meta标签了





<meta name="viewport"
    content="width=device-width, viewport-fit=cover, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">





这种标签flexble会自动帮我们加上。


下面附上修改完后的flexble脚本代码：





(function flexible (window, document) {
  var docEl = document.documentElement
  var dpr = window.devicePixelRatio || 1
  var isMobileDevice = /(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent);
  dpr = isMobileDevice "text-align: center">vue cli3适配所有端方案的实现




最后在head添加js标签，引入它：





<script src="/UploadFiles/2021-04-02/flexible.js">


自此，项目就配置完了。


        

        

            
上一篇：JS实现表单中点击小眼睛显示隐藏密码框中的密码

            
下一篇：RxJS在TypeScript中的简单使用详解

        

        
一句话新闻
微软与英特尔等合作伙伴联合定义“AI PC”：键盘需配有Copilot物理按键
几个月来，英特尔、微软、AMD和其它厂商都在共同推动“AI PC”的想法，朝着更多的AI功能迈进。在近日，英特尔在台北举行的开发者活动中，也宣布了关于AI PC加速计划、新的PC开发者计划和独立硬件供应商计划。
在此次发布会上，英特尔还发布了全新的全新的酷睿Ultra Meteor Lake NUC开发套件，以及联合微软等合作伙伴联合定义“AI PC”的定义标准。