css

html { font-size: calc(100vw / 3.75) }

js
document.documentElement.style.fontSize = $(document.documentElement).width()/3.75 + 'px';

$(window).on('resize', function() {
document.documentElement.style.fontSize = $(document.documentElement).width()/3.75 + 'px';
})

注：3.75可更改为屏幕尺寸6.4或其他

此处1rem相当于100px;

rem : web app适配的秘密武器的更多相关文章

  1. Web App适配iPhoneX

    前言 Iphone每次退出新尺寸的手机都会掀起一番适配风波,这次没有下巴但有刘海的iPhoneX更是如此,网传横屏下的适配动画更是令不少人汗颜. 其实对于Native App来说,适配并不算困难(当然 ...

  2. Web App适配不同屏幕的几点建议

    安卓设备在屏幕尺寸和像素密度上差别很大,因此在使用WebView加载网页时就需要考虑到这种差别,对我们的网页做出精心的设计以在不同的屏幕上都能得到合适的展现.通常情况下,我们需要考虑到两个因素:1.视 ...

  3. 移动端Web App自适应布局探索

    1.困扰多时的问题 在这之前做Web App开发的的时候,在自适应方面一般都是宽度通过百分比,高度以iPhone6跟iPhone5之间的一个平衡值写死,我们的设计稿都是iPhone5的640 * 11 ...

  4. web app变革之rem（手机屏幕实现全适配）

    以往web移动适配,常规写法是:media only screen @media only screen and (min-device-width: 320px){ //针对iPhone 3 } @ ...

  5. web app 自适应方案总结 关键字 弹性布局之rem

    关于rem,主要参考文档 1.腾讯ISUX (http://isux.tencent.com/web-app-rem.html) 2.http://www.w3cplus.com/css3/defin ...

  6. web app 自适应方案总结 弹性布局之rem

    关于rem,主要参考文档 1.腾讯ISUX (http://isux.tencent.com/web-app-rem.html) 2.http://www.w3cplus.com/css3/defin ...

  7. web app变革之rem

    rem这是个低调的css单位,近一两年开始崭露头角,有许多同学对rem的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了.但是我对rem综合评价是用来做web app它绝对是最合适的人选之一. ...

  8. web app 自适应 弹性布局之rem

    关于rem,主要参考文档 1.腾讯ISUX (http://isux.tencent.com/web-app-rem.html) 2.http://www.w3cplus.com/css3/defin ...

  9. web app 变革之rem

    rem这是个低调的css单位,近一两年开始崭露头角,有许多同学对rem的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了.但是我对rem综合评价是用来做web app它绝对是最合适的人选之一. ...

随机推荐

  1. Centos 7 查看电池电量信息

    而不像 ubuntu 在 /proc/acpi/battery/BAT 中. 其中 capacity 参数就是当前电脑的剩余电量的百分比信息了

  2. linq 把list分组为 List<List>

    public class User { public int UserID { get; set; } public string UserName { get; set; } public int ...

  3. 利用Backtrace来捕获段错误堆栈信息

    具体参考文档:https://blog.csdn.net/gatieme/article/details/84189280 测试Demo: #include <execinfo.h> #i ...

  4. 设计模式-行为型模式，python备忘录模式

    备忘录模式 备忘录模式(Memento Pattern)保存一个对象的某个状态,以便在适当的时候恢复对象.备忘录模式属于行为型模式. 介绍 意图:在不破坏封装性的前提下,捕获一个对象的内部状态,并在该 ...

  5. DES ECB 模式 JAVA PHP C# 实现 加密 解密 兼容

    版本一: JAVA: import org.slf4j.Logger; import org.slf4j.LoggerFactory; import sun.misc.BASE64Decoder; i ...

  6. 【netcore基础】MVC API全局异常捕捉中间件ExceptionHandlerMiddleWare

    项目中想通过统一的接口格式返回异常信息,而不是404 500等HTTP协议层的异常响应 例如 { , , "message":"用户名或密码不正确", &quo ...

  7. 10.21CRM项目(01)

    2018-10-21 13:35:19 crm第一天!放上初始源码! 后面等做完最后一天的手放上所有源码! 越努力越幸运!永远不要高估自己! 注意 多层for循环的时候,切记,不要名字重复!啦!!!! ...

  8. day_6.8 py 网络编程

    2018-6-8 18:20:30 OSI模型:就是七层物理层 ICMP 我ping你的时候要用,不仅要知道ip地址和网卡号mac地址 ARP  在我和你通讯前不知道的mac地址需要广播一下,当我说的 ...

  9. B - Hamburgers

    Polycarpus loves hamburgers very much. He especially adores the hamburgers he makes with his own han ...

  10. es7 class装饰器

    文档http://es6.ruanyifeng.com/#docs/decorator ts文档 https://www.tslang.cn/docs/handbook/decorators.html ...