前言

專案加上了縮放比例, 但是ionic本身很多元件都是px的 導致在github上的外掛總是這樣那樣的問題弄得心很累, 一氣之下。直接全部替換成了淘寶的H5方案，反正改的也不少

匯入

方案1. 直接阿里雲CDN

在單頁index.html中加入

<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

方案2. 下載到本地

github地址

https://github.com/amfe/lib-flexible

將index.min.js 加入專案中
然後在單頁index.html中加入

<script src="assets/js/index.min.js"></script>

最後都需要：同步函式

// 設計圖寬度是750
$design-width: 750;

@function px2rem( $px )
{
  @return $px/$design-width*10 + rem; //對應js 
}

以上函式,在其他地方使用,若頁面是300px, 就可以直接寫成
height: px2rem(300);

總結

目前大多數前端UI框架基本都是flex加上px做的相容方案, 引入rem 會將元件本身樣式做一次大修改, 總之改的比較煩，建議謹慎選擇。

原文地址為：