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. swoole消息推送

    socket.php // 注释的部分是学习的笔记 <?php //创建websocket服务器对象,监听0.0.0.0:9502端口 $ws = ); //监听WebSocket连接打开事件 ...

  2. 【Nginx】配置及使用

    常用命令: nginx -t //可以查到配置是否正确,以及配置文件路径. 如果配置不生效 sudo killall -9 nginx 注意在配置文件中注明访问来源(例如没有写明ip,就不能通过ip直 ...

  3. 记一次 Spring 事务配置踩坑记

    记一次 Spring 事务配置踩坑记 问题描述:(SpringBoot + MyBatisPlus) 业务逻辑伪代码如下.理论上,插入数据 t1 后,xxService.getXxx() 方法的查询条 ...

  4. C#基础--类/接口/成员修饰符，多态、重载、重写，静态和非静态

    C#基础--类/接口/成员修饰符,多态.重载.重写,静态和非静态 类/接口/成员修饰符 C#修饰符---接口: 接口默认访问符是internal接口的成员默认访问修饰符是public C#修饰符--类 ...

  5. Bitmap（三）

    转自:http://www.open-open.com/lib//view/open1333418945202.html Bitmap是Android系统中的图像处理的最重要类之一.用它可以获取图像文 ...

  6. linux-Centos 7下bond与vlan技术的结合

    服务器eno1与eno2作bonding,捆绑成bond0接口,服务器对端交换机端口,同属于301.302号vlan接口 vlan 301: 10.1.2.65/27                  ...

  7. 淘宝 NPM 镜像使用

    前言 因为众所周知的原因,使用node,官方NPM仓库安装依赖包是个看人品的事情,不过有万能的淘宝,所以需要部分调整就可以避免这些原因.(以下内容osx, centos下测试通过) 淘宝镜像基本使用 ...

  8. 7.9CSS总结

    2018-7-9 18:01:18 1.类选择器是 用  .      .xxx{}  (ps,公司常用的是类选择  ) 2.id选择器是用  #   #xx{}  (id选择器并不常用) 3.css ...

  9. 6.29一个_rcv 面试题

    #coding:utf-8 #2018-6-29 16:30:34 #类调用属性,属性没有,用__getatrr__魔法方法! #目的打印出 think different itcast class ...

  10. linux 下 sublime配置

    sublime3 import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_p ...