移动端布局（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>