移動端佈局（rem+dpr）

時間 2019-11-24

標籤移動佈局 rem+dpr rem dpr 欄目無線简体版

原文原文鏈接

最近在作一個移動端的項目，在摸索中發現了一種移動端的佈局和字體自適應方法，在當下來講應該是最好的了！主要是針對跟我同樣還在摸索當中的同窗們！主要也爲了記錄一下我活着過。。。

css

最主要的是字體使用px，配合用data-dpr屬性來區分不一樣dpr下的的大小。其餘使用rem做爲單位git

div {
    width: 1rem; 
    height: 0.4rem;
    font-size: 12px; // 默認寫上dpr爲1的fontSize
}

[data-dpr="2"] div {
    font-size: 24px;
}

[data-dpr="3"] div {
    font-size: 36px;
}

淘寶lib-flexible Github傳送門 github

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

使用方法

lib-flexible庫的使用方法很是的簡單，只須要在Web頁面的<head></head>中添加對應的flexible_css.js,flexible.js文件：佈局

第一種方法是將文件下載到你的項目中，而後經過相對路徑添加:字體

<script src="build/flexible_css.debug.js"></script>
<script src="build/flexible.debug.js"></script>

或者直接加載阿里CDN的文件：flex

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。