在做魯商圈移動端APP項目時用到了flexible進行移動端適配。

一、前景提要
1.css單位:px ,rem,em,pt,vw,%
2.
3.
(1)物理像素(physical pixel)
一個物理像素是顯示器(手機屏幕)上最小的物理顯示單元(像素顆粒),在操作系統的調度下,每一個設備像素都有自己的顏色值和亮度值。 如:iPhone6上就有750*1334個物理像素顆粒。
(2)dip設備獨立像素(density-independent pixel)
設備獨立像素(也叫密度無關像素),可以認為是計算機坐標系統中得一個點,這個點代表一個可以由程序使用的虛擬像素(比如: css像素),有時我們也說成是邏輯像素。
(3)dpr設備像素比(device pixel ratio )
設備像素比(簡稱dpr)定義了物理像素和設備獨立像素的對應關系。
(4)公式:設備像素比 = 物理像素 / 邏輯像素(px) Ps:在某一方向上,x方向或者y方向

二、flexible的使用
flexible.js 的用法非常的簡單,在頁面的
中引入flexible.js文件即可(先加載執行)1.第一種方法是將文件下載到你的項目中,然后通過相對路徑添加:
2.直接加載阿里CDN的文件:
3.js中重要的地方(根據設計圖更改尺寸大小):
例如設計稿為750px
function refreshRem() {
var width = docEl.getBoundingClientRect().width;
if (width / dpr > 750)
{
width = 750 * dpr
}
var rem = 100 * (width / 750)
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}
css中rem單位寫法:
.div{
width:750px;//轉換前
width:7.5rem;//轉換后
}
關鍵詞:
