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. 嵌入式开发之hi3519---进程线程间的同步和互斥，条件变量、信号了、互斥锁等

    sem_post 最安全 sem  有序,会卡顿 阻塞 mutex  无序,不能同步 http://blog.chinaunix.net/uid-20671208-id-4935154.html ht ...

  2. Windows server 2008 R2 多用户远程桌面

    1.  创建三个本地管理员测试用户 user01  user02  user03并设置密码 2.  开启远程桌面连接 3.新建规则放行远程桌面端口3389 (或者关闭防火墙) 4.安装远程桌面服务 5 ...

  3. java注解中的元注解

    一:java注解中的元注解 四个元注解分别是:@Target,@Retention,@Documented,@Inherited , 再次强调下元注解是java API提供,是专门用来定义注解的注解, ...

  4. [IR] Word Embeddings

    From: https://www.youtube.com/watch?v=pw187aaz49o Ref: http://blog.csdn.net/abcjennifer/article/deta ...

  5. [AWS] Amazon Cognito

    看懂 [AWS] User management and [AWS] OAuth2.0 才方便看到此篇. Ref: 常见 Amazon Cognito 场景 Amazon Cognito 的两个主要组 ...

  6. asp.net mvc 3.0 知识点整理 ----- (4).asp.net mvc 3 和asp.net mvc 4 对比

    asp.net mvc的版本更新很快,每个版本都在前一个版本的基础上,进行性能的优化和功能的完善和提升. 以下,便是我对比了下两个版本,发现最基本的差异.(更新补充中..) 一.关于配置类Global ...

  7. 除了/etc/init.d/加启动脚本 或者在/etc/rc.local中加启动命令，还可以通过crontab来完成服务器重启后自动启动服务的操作

    @reboot /bin/sh /opt/soft/percona/bin/mysqld_safe --defaults-file=/mnt/perconadata/my.cnf --basedir= ...

  8. CVE-2019-8341 Jinja2 RCE漏洞学习

    漏洞简述 漏洞简介 Jinja2.10版本,Environment的实例方法from_string,存在RCE,该函数在内部实现逻辑中,存在exec函数去执行了,from_string函数参数中的ji ...

  9. Linux之vmware安装

    环境准备  mac            用     vmware  fusion                      虚拟机            和  iterm2      远程连接工具, ...

  10. 打造研发效率核心竞争力！第40届MPD软件工作坊北京站议题公开

    同样是做研发,为什么你的效率总是提不上来?都在寻找创新的技术领域,为何别人总能抢占先机?提升自己的研发竞争力,你都有什么方法? 研发效能已经成为软件企业发展非常核心的竞争力.身处在高速发展的软件研发行 ...