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. ubuntu14.04 中virtual box 加入 usb

    参考两篇文章: 1.http://www.cnblogs.com/ericsun/archive/2013/06/10/3130679.html 2.http://www.360doc.com/con ...

  2. windows下MySQL免安装版配置教程mysql-5.7.24-winx64.zip版本

    一. 以管理员身份运行cmd,进入mysql的bin目录 执行以下代码. #初始化数据库 mysqld --initialize #初始化不会显示密码mysqld --initialize --con ...

  3. PHP最全笔记(三)(值得收藏,不时翻看一下)

    /* [数组函数] *///统计计算count        计算数组中的单元数目或对象中的属性个数array_count_values  统计数组中所有的值出现的次数array_product    ...

  4. talk is cheap, show me the code——dcgan,wgan,wgan-gp的tensorflow实现

    最近学习了生成对抗网络(GAN),基于几个经典GAN网络结构做了些小实验,包括dcgan,wgan,wgan-gp.坦率的说,wgan,wgan-gp论文的原理还是有点小复杂,我也没有完全看明白,因此 ...

  5. 设计模式-结构型模式,python组合模式

    设计模式上大的方向上分继承和组合,就是类模式和对象模式.此篇的组合模式非继承和组合概念中的组合.桥接 策略 代理 装饰者都用了组合,此组合非彼组合. 组合模式 组合模式(Composite Patte ...

  6. 如何用VBA实现格式刷的功能?

    1. http://club.excelhome.net/thread-373686-1-1.html 复制1格式Selection.CopyFormat粘贴格式Selection.PasteForm ...

  7. 在Android源码中查找Java代码中native函数对应的C++实现

    Android源码中很多关键代码都是C++实现的,java通过jni来调用,经常会看到java中这样的代码: static native Thread currentThread(); 如何根据方法名 ...

  8. <a>标签中的href如何调用js代码

    在HTML中,<a>标签的href属性用于指定超链接的目标的URL.在所有浏览器中,链接的默认外观是: 未被访问的链接带有下划线而且是蓝色的 已被访问的链接带有下划线而且是紫色的 活动链接 ...

  9. 证书文件(pfx)读取时报 “指定的网络密码不正确”

    实际情况: 1.本地测试正确,发布到windows server 2003 iis6 可以正常运行 发布到 windows server 2008 上 II7就报 “指定的网络密码不正确” 日志报错为 ...

  10. 淘宝NPM镜像cnpm

    # 安装cnpm命令 npm install -g cnpm --registry=https://registry.npm.taobao.org2.cnpm install