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.pswp.cn/news/247388.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/247388.shtml
英文地址,請注明出處:http://en.pswp.cn/news/247388.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

VS2005無法啟動解決方法(轉)

一直有一個問題困擾,VS2005用得好好滴,突然有一天開始就進不去了,啟動了以后,沒有任何界面的出現,但是打開任務管理器,卻能夠看到進程的存在,真是奇怪了,我試圖卸載并且重新安裝&…

kylinH5框架之項目組件理解

目錄 組件介紹 組件聲明結構 組件接口 script dependency template style 狀態注入 接口聲明 組件介紹 Component 擴充自 Vue 的組件, 提供了 Vue 組件對等的輸入參數能力。在代碼書寫時提供類 class 的裝飾器 Decorator 風格。 import { Component, Watch } from al…

Markdown 語法簡介

這是標題一 標題二 標題三 print(hello) 這是一個python 第一點 thiw dhaishd 第二點 轉載于:https://www.cnblogs.com/BlogOfEr/p/11229682.html

kylinH5框架之項目開發調試

進行開發調試,需要完成以下步驟: 安裝依賴開發調試構建生產 點擊 代碼示例,獲取 Kylin Demo,并完成以下操作。 安裝依賴 進入項目根目錄,使用 cnpm 安裝 npm 依賴: # 安裝npm依賴 cnpm install 開發調試…

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…

kylinH5框架之項目腳手架

頁面介紹 Page 是一個 Webview 的邏輯抽象層,同時也是組件掛載的根節點。 代碼引入 import { Page } from ali/kylin-framework; 頁面聲明結構 一個Page包含的接口在頁面接口中聲明,提供了對 Vue 實例的完整控制能力,簡易的 Page 使用如…

博弈論學習筆記

決定近段時間復習一下博弈論順便寫點筆記。 大佬博客:幾種常見博弈模型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…

Promise鏈式調用和解決回調地獄的ES7終極解決方法async,await

promise鏈式調用 **then 是成功回調&#xff0c;只要在then后邊return一個promise就可以繼續then**<script type"text/javascript">let p1new Promise(function(resolve,reject){setTimeout(function(){resolve()//成功回調// reject()//失敗回調},2000)//2秒…

1.MySQL目錄結構

分為兩個目錄&#xff1a; 1.安裝目錄&#xff1a; 2.數據目錄&#xff1a; 在Linux下 yum安裝mysql后使用 find / -name my.cnf 找到mysql數據文件的位置 轉載于:https://www.cnblogs.com/sdrbg/p/11237231.html

對promise.all底層的實現的研究

1.Promise.all(iterable)返回一個新的Promise實例,此實例在iterable參數內素有的Promise都fulfilled或者參數中不包含Promise時&#xff0c;狀態變成fulfilled。 如果參數中Promise有一個失敗rejected &#xff0c;此實例回調失敗&#xff0c;失敗原因的是第一個失敗Promise的返…

vue-provide/inject輕松實現跨級訪問祖先組件

provide&#xff1a;Object | () > Object inject&#xff1a;Array<string> | { [key: string]: string | Symbol | Object } provide 和 inject 主要為高階插件/組件庫提供用例。并不推薦直接用于應用程序代碼中。是2.2.0版本 新增的。 這對選項需要一起使用&#x…

python 操作redis,存取為字節格式,避免轉碼加

這種情況連接數據庫&#xff0c;對數據的存取都是字節類型&#xff0c;存取時還得轉碼一下 from redis import Redis# 實例化redis對象rdb Redis(hostlocalhost, port6379, db0,passwordaaa123) rdb.set(name, root) name rdb.get(name) print(name)為了避免上述情況&#x…

element ui table scrollTop 滾動到行頭或行尾

1.設置table的ref為tableList2.設置滾動至頂部this.$refs.tableList.bodyWrapper.scrollTop 0;3.設置滾動至底部this.$refs.tableList.bodyWrapper.scrollTop this.$refs.tableList.bodyWrapper.scrollHeight;//如果請求完更新數據&#xff0c;需要使用$nextTick this.$nextTic…

Element-UI中Drawer抽屜去除標題自帶藍色框

當點擊事件drawertrue時&#xff0c;抽匣回打開 這時抽匣的標題會出現一個難看的藍色邊框&#xff0c;一會就會消失&#xff0c;但是好丑&#xff0c;所以要去掉它 解決方法 /deep/ :focus {outline: 0;} vue組件中&#xff0c;在style設置為scoped的時候&#xff0c;里面在…

Java生鮮電商平臺-B2B生鮮的互聯網思維

Java生鮮電商平臺-B2B生鮮的互聯網思維 在互聯網高速發展的今天&#xff0c;為我們的生活帶來了眾多便利。然而互聯網從早期的萌芽狀態到現在婦孺皆知&#xff0c;它的崛起速度遠遠超乎世人的想象。人們開始關注互聯網并且研究它&#xff0c;而思維模式的研究則是從深層次研究事…

Java生鮮電商平臺-高并發核心技術訂單與庫存實戰

Java生鮮電商平臺-高并發核心技術訂單與庫存實戰 一、 問題 一件商品只有100個庫存&#xff0c;現在有1000或者更多的用戶來購買&#xff0c;每個用戶計劃同時購買1個到幾個不等商品。 如何保證庫存在高并發的場景下是安全的&#xff1f; &#xff08;1&#xff09;不多發 &…

Vue2 MVVM 雙向綁定(數據劫持+發布者-訂閱者模式)

參考文獻&#xff1a;https://www.cnblogs.com/libin-1/p/6893712.html https://juejin.im/post/5b2f0769e51d45589f46949e MVVM拆開來即為Model-View-ViewModel&#xff0c;有View&#xff0c;ViewModel&#xff0c;Model三部分組成。View層代表的是視圖、模版&#xff0c;負…

常用的激活函數

1.階躍函數 &#xff0c;值域{0,1} 1 def step_function(x): 2 return np.array(x>0,dtypenp.int) 2.sigmoid函數 &#xff0c;值域(0,1) 1 def sigmoid(x): 2 return 1/(1np.exp(-x)) 3.relu函數 &#xff0c;值域[0&#xff0c;∞&#xff09; 1 def relu(x): 2 …

前端優化-vue-cli4安裝webpack-bundle-analyzer分析包文件

使用vue-cli3創建了一個工程目錄&#xff0c;技術棧為vue-cli3vue-routervuexelement-uiv-chartsaxios。但是等到項目開發完后&#xff0c;發現生成的app.js特別大&#xff0c;接近10M。為了優化項目性能&#xff0c;需要使用webpack-bundle-analyzer分析包文件&#xff0c;找出…