设置移动端参考元素大小

sublime插件:cssrem配置


{
  "px_to_rem": 108,//设计稿按照1080p给的
  "max_rem_fraction_length": 2,
  "available_file_types": [".css", ".less", ".sass"]
}

运算规则


设计稿一般按sp给出,需要先换算成px(一般乘以3),再利用cssrem转换为rem

code


 ! function(d) {
    var c = d.document;
    var a = c.documentElement;
    var b = d.devicePixelRatio;
    var f;

function e() {
    var h = a.getBoundingClientRect().width,
        g;
    if (b === 1) {
        h = 720
    }
    g = h / 10;
    a.style.fontSize = g + "px"
}
if (b > 2) {
    b = 3
} else {
    if (b > 1) {
        b = 2
    } else {
        b = 1
    }
}
a.setAttribute("data-dpr", b);
d.addEventListener("resize", function() {
    clearTimeout(f);
    f = setTimeout(e, 200)
}, false);
e()

}(window);
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,269评论 19 139
  • Sublime Text:一款具有代码高亮、语法提示、自动完成且反应快速的编辑器软件,不仅具有华丽的界面,还支持插...
    xiaotao123阅读 9,534评论 0 27
  • Sublime Text:一款具有代码高亮、语法提示、自动完成且反应快速的编辑器软件,不仅具有华丽的界面,还支持插...
    追風逸少丶阅读 11,383评论 1 34
  • Sublime Text:一款具有代码高亮、语法提示、自动完成且反应快速的编辑器软件,不仅具有华丽的界面,还支持插...
    晚晴幽草阅读 712,953评论 149 1,114
  • Spring Boot 参考指南 介绍 转载自:https://www.gitbook.com/book/qbgb...
    毛宇鹏阅读 47,005评论 6 342