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. Oracle Enterprise Linux 6.4 下配置vncserver

    ① 安装vncserveryum install tigervnc-server ② 配置/etc/sysconfig/vncservers   配置参数   # VNCSERVERS="2 ...

  2. 集群介绍 keepalived介绍 用keepalived配置高可用集群

    集群介绍 • 根据功能划分为两大类:高可用和负载均衡 • 高可用集群通常为两台服务器,一台工作,另外一台作为冗余,当提供服务的机器宕机,冗余将接替继续提供服务 • 实现高可用的开源软件有:heartb ...

  3. nginx 配置信息

    主配置文件: cat /etc/nginx/nginx.conf# For more information on configuration, see:# * Official English Do ...

  4. springboot logback 集成

    在 application.yml 中敲 logging.pattern.consle ,IDEA 会联想到对应的值.单击属性就可以跳到 LoggingApplicationListener.java ...

  5. 18职责链模式CoR

    一.什么是职责链模式 Chain of Responsibility(CoR)模式也叫职 责链模式或者职责连锁模式,是行为模式之一, 该模式构造一系列分别担当不同的职责的类的对 象来共同完成一个任务, ...

  6. jdk 自带的数据库Derby使用

    ij是derby自带的一个功能强大的数据库管理工具,可以进行很多数据库管理的操作,包括创建数据库, 启动/关闭数据库,执行SQL脚本等.完成准备工作后,就可以启动并使用ij工具了. 在cmd中输入如下 ...

  7. JavaのEclipse安装Tomcat插件

    由于我装的eclipse是SE版,所以没有Servlet项目,需要自己安装插件. 一:首先到Tomcat的官网下载对应Tomcat版本. http://tomcat.apache.org/ 现在tom ...

  8. js for in 获得遍历数组索引和对象属性

    for in 遍历对象属性 获取的是对象的属性名 var person ={ name:"admin", age:"21", address:"sha ...

  9. python 闭包用法

    def make_addr(addend): def addr(augend): return augend + addend return addr p = make_addr(23) q = ma ...

  10. python的数据结构之栈

    栈是一种特殊的列表,栈内的元素只能通过列表的一端访问,这一端称为栈顶.栈被称为一种后入先出(LIFO,last-in-first-out)的数据结构. 由于栈具有后入先出的特点,所以任何不在栈顶的元素 ...