kylin框架中使用postcss-px2rem

1.kylin框架的使用不做介绍

2.页面中

html模板页面中已经使用clientWidth/375*100+px,已经赋值了html的fontsize随页面宽度而变化。

比如宽度375的屏 html的fontsize为100px

kylin加载postcss-px2rem

cnpm i --save-dev postcss-px2rem

在根目录下的plugin.js中

var px2rem = require('postcss-px2rem'); //打开导入
// var proxy = require('http-proxy-middleware');exports.pluginName = '@ali/kylin-plugin-custom';
exports.default = function () {return {// 修改 webpack 配置webpack: function modifyWebpackConfig(webpackConfig) {//  如果要开启 px2rem, cnpm i --save-dev postcss-px2rem 安装该模块并取消下面的注释webpackConfig.vue.postcss.push(px2rem({remUnit: 100}));return webpackConfig;},// 修改 babel 配置babel: function modifyBabelConfig(babelConfig) {return babelConfig;}}
}

注意基数单位为100,即1rem = 100px;

然后在index-view中

写正常的px代码运行,会自动替换为rem

大小也会跟着html的fontsize而变化

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/247388.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

kylinH5框架之项目组件理解

目录 组件介绍 组件声明结构 组件接口 script dependency template style 状态注入 接口声明 组件介绍 Component 扩充自 Vue 的组件, 提供了 Vue 组件对等的输入参数能力。在代码书写时提供类 class 的装饰器 Decorator 风格。 import { Component, Watch } from al…

Java生鲜电商平台-深入订单拆单架构与实战

Java生鲜电商平台-深入订单拆单架构与实战 Java生鲜电商中在做拆单的需求,细思极恐,思考越深入,就会发现里面涉及的东西越来越多,要想做好订单拆单的功能,还是相当有难度, 因此总结了一下拆单功能细节&…

python3中Requests将verify设置为False后,取消警告的方式

import requests resp requests.get(https://www.***.com, verifyFalse)调用成功但是会有如下警告信息: InsecureRequestWarning: Unverified HTTPS request is being made. Adding certificate verification is strongly advised. See: https://urllib3.readthedo…

博弈论学习笔记

决定近段时间复习一下博弈论顺便写点笔记。 大佬博客:几种常见博弈模型https://blog.csdn.net/wr132/article/details/51213331 SG函数与SG定理https://www.cnblogs.com/ECJTUACM-873284962/p/6921829.html 无敌的博弈总结https://blog.csdn.net/acm_cxlove/article…

Element-UI中Drawer抽屉去除标题自带蓝色框

当点击事件drawertrue时,抽匣回打开 这时抽匣的标题会出现一个难看的蓝色边框,一会就会消失,但是好丑,所以要去掉它 解决方法 /deep/ :focus {outline: 0;} vue组件中,在style设置为scoped的时候,里面在…

Java生鲜电商平台-高并发核心技术订单与库存实战

Java生鲜电商平台-高并发核心技术订单与库存实战 一、 问题 一件商品只有100个库存,现在有1000或者更多的用户来购买,每个用户计划同时购买1个到几个不等商品。 如何保证库存在高并发的场景下是安全的? (1)不多发 &…

Vue2 MVVM 双向绑定(数据劫持+发布者-订阅者模式)

参考文献:https://www.cnblogs.com/libin-1/p/6893712.html https://juejin.im/post/5b2f0769e51d45589f46949e MVVM拆开来即为Model-View-ViewModel,有View,ViewModel,Model三部分组成。View层代表的是视图、模版,负…

常用的激活函数

1.阶跃函数 ,值域{0,1} 1 def step_function(x): 2 return np.array(x>0,dtypenp.int) 2.sigmoid函数 ,值域(0,1) 1 def sigmoid(x): 2 return 1/(1np.exp(-x)) 3.relu函数 ,值域[0,∞) 1 def relu(x): 2 …

前端优化-vue-cli4安装webpack-bundle-analyzer分析包文件

使用vue-cli3创建了一个工程目录,技术栈为vue-cli3vue-routervuexelement-uiv-chartsaxios。但是等到项目开发完后,发现生成的app.js特别大,接近10M。为了优化项目性能,需要使用webpack-bundle-analyzer分析包文件,找出…

不要再问我三次握手和四次挥手

三次握手和四次挥手是各个公司常见的考点,也具有一定的水平区分度,也被一些面试官作为热身题。很多小伙伴说这个问题刚开始回答的挺好,但是后面越回答越冒冷汗,最后就歇菜了。 见过比较典型的面试场景是这样的: 面试官&#xff1…

VScode PowerShell运行脚本报错禁止运行脚本解决方式图文

今天在新Windows电脑上用VScode的终端PowerShell运行一个脚本的时候, 错误 在vscode终端运行vue -V查看版本失败 PS C:\Users\11388> vue -V vue : 无法加载文件 E:\NodeJs\node_global\vue.ps1,因为在此系统上禁止运行脚本。有关详细信息&#xf…

添加右键用Sublime Text3 打开文件和文件夹

最近重新装了一下系统,右键没有用Sublime Text 3打开的选项了,于是查了一下解决方案 1、环境 Win10和Win7都可以Sublime Text 3最新版本以下为Win10系统下截图 2、添加右键打开文件 Win R,输入regedit,打开注册表 找到HKEY_CLASSESS_ROOT…

Windows Mobile Widget Emulator

今天Vimpyboy 在codeplex发布了Windows Mobile Widget Emulator。这是一个用来调试Windows Mobile 6.5 Widget的工具,我在做Windows Mobile 6.5 新功能widget开发 的时候就发现调试Widget很麻烦。也有想法做一个Emulator,其实这个Emulator目标很明显&…

AttributeError: Can only use .str accessor with string values, which use np.object_ dtype in pandas

忘记网址了…… 问题: 分析思路与解决方法: 转载于:https://www.cnblogs.com/bravesunforever/p/11247988.html

Java生鲜电商平台-促销架构以及秒杀解决方案实战

Java生鲜电商平台-促销架构以及秒杀解决方案实战 背景:随着这几年的电商的大热,我们经常看到一些商家为了促销和快速收益,纷纷推出了秒杀活动.不管是日常的超市里面的促销,明星演唱会门票售卖,还是春节订阅火车票,等等我们都能看到秒杀活动的影子. 1. 构建秒杀活动架构 1.1 说明…

PHP Cookie处理

Cookie 是什么? cookie是保存在客户端的信息包(一个文件) cookie 常用于识别用户。 cookie 是一种服务器留在用户计算机上的小文件。每当同一台计算机通过浏览器请求页面时,这台计算机将会发送 cookie。通过 PHP,您能…

PHP-连接数据库

1.2 连接数据库 通过PHP做MySQL的客户端 1.2.1 开启mysqli扩展 在php.ini中开启mysqli扩展 extensionphp_mysqli.dll开启扩展后重启服务器,就可以使用mysqli_函数了,1.2.2 连接数据库 创建news数据库 -- 创建表 drop table if exists news; create …

python模块初始与time、datetime及random

模块初始与time、datetime及random 模块初始 模块的概念(本质为一个py文件) python模块可以将代码量较大的程序分割成多个有组织的、彼此独立但又能互相交互的代码片段,这些自我包含的有组织 的代码段就是模块,模块在物理形式上表…

PHP-面向对象编程教程

1.2 面向对象介绍 1.2.1 介绍 面向对象是一个编程思想。编程思想有面向过程和面向对象 面向过程:编程思路集中的是过程上 面向对象:编程思路集中在参与的对象 以去饭馆吃饭为例: ​ 面向过程:点菜——做菜——上菜——吃饭—…

Java生鲜电商平台-统一异常处理及架构实战

Java生鲜电商平台-统一异常处理及架构实战 补充说明:本文讲得比较细,所以篇幅较长。 请认真读完,希望读完后能对统一异常处理有一个清晰的认识。 背景 软件开发过程中,不可避免的是需要处理各种异常,就我自己来说&…