//得到手机屏幕的宽度

 let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;

 if(htmlWidth>750){htmlWidth=750}

 //得到html的Dom元素

 let htmlDom = document.getElementsByTagName('html')[0];

 //设置根元素字体大小

 htmlDom.style.fontSize = htmlWidth/20 + 'px';

 htmlDom.style.margin = '0 auto';

 htmlDom.style.maxWidth = 750 + 'px';

比如说，手机宽度像素为360px的话，1rem就是18px；像素为320px的话，1rem就是16px.

js控制手机端字体大小rem的更多相关文章

  1. js 抓取屏幕宽度设置字体大小 rem

    var doc = window.document var docEl = doc.documentElement var tid function refreshRem () { var width ...

  2. 手机端布局，rem布局动态获取根字体大小

    手机端布局,rem布局动态获取根字体大小. 以下代码: //rem布局动态获取根字体大小 function remDynamicLayout(){ var $windowWidth = $(windo ...

  3. 70.JS---利用原生js做手机端网页自适应解决方案rem布局

    利用原生js做手机端网页自适应解决方案rem布局 刚开始我用的是下面这段代码,然后js通过外部链接引入,最后每次用手机刷新网页的时候都会出现缩略图 function getRem(pwidth, pr ...

  4. js仿手机端九宫格登录功能

    js仿手机端九宫格登录功能 最近闲来无事把以前无聊时开发的小东西拿出来和大家分享下,写的不好的请指出,我会及时修改.谢谢. 功能及方法逻辑都注释在代码中.所以麻烦大家直接看代码. 效果如下: 话不多说 ...

  5. js判断手机端操作系统(Andorid/IOS)

    非常实用的js判断手机端操作系统(Andorid/IOS),并自动跳转相应下载界面 androidURL = "http://xxx/xxx.apk"; var browser = ...

  6. CSS3手机端字体不能小于12号的方法

    CSS3手机端字体不能小于12号的方法 <pre> .xiaoyu12fontsize{ -webkit-transform-origin: 0% 0%; -webkit-transfor ...

  7. CSS3字体大小rem属性用法

    PX为单位 在Web页面初期制作中,我们都是使用“px”来设置我们的文本,因为他比较精确和固定. 只要页面某元素设置了px字体大小,其子元素/子孙元素未设置字体大小或设置的字体大小css优先级没父元素 ...

  8. 应用js改变问章字体大小

    刚来公司的时候领导给分配的都是一些简单的简单的简单的.....任务 一次叫我把文章的字体大小变换功能写出来.在网上搜了很多都不管用!不过功夫不负有心人还是被我找到了!拿出来分享下! <scrip ...

  9. js判断手机端

    if (window.location.toString().indexOf('pref=padindex') != -1) { } else { if (/AppleWebKit.*Mobile/i ...

随机推荐

  1. 前端常用功能记录(二)—datatables表格

    并不是所有的后台开发都有美工和前端工程师来配合做页面,为了显示数据并有一定的美感,jQuery的DataTables插件对于像我这样的前端菜鸟来说真是雪中送炭,当然对于专业的前端开发者来说它更是锦上添 ...

  2. C&C++图形图像处理开源库

    Google三维APIO3D O3D 是一个开源的 WebAPI 用来在浏览器上创建界面丰富的交互式的 3D 应用程序.这是一种基于网页的可控3D标准.此格式期望真正的基于浏览器,独立于操作系统之外, ...

  3. Java基础-SSM之Spring的POJO（Plain Old Java Object）实现AOP

    Java基础-SSM之Spring的POJO(Plain Old Java Object)实现AOP 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 上次我分享过Spring传统的A ...

  4. 纯CSS实现表单验证

    ladies and 乡亲们,表单验证你在做吗?客户端or服务器端,javascript or jquery,动手写 or 使用插件,今天我们来探索下使用纯css实现表单验证,借以学习css sele ...

  5. bzoj千题计划207：bzoj1879: [Sdoi2009]Bill的挑战

    http://www.lydsy.com/JudgeOnline/problem.php?id=1879 f[i][j] 表示匹配了i个字符,匹配字符串的状态为j的方案数 枚举下一个字符是什么 计算加 ...

  6. 数学：二次剩余与n次剩余

    二次剩余求的是这个东西 如果给定x,再给定若干个大的质数p,如果结果a相同,那么x是完全平方数? 给出别人的二次剩余的代码: /*poj 1808 题意: 判断平方剩余,即判断(x^2)%p=a是否有 ...

  7. JMS学习(六)--提高非持久订阅者的可靠性 以及 订阅恢复策略

    一,非持久订阅者 和 实时消费消息 在这篇文章中区分了Domain为Pub/Sub.Destination为Topic时,消费者有两种:持久订阅者 和 非持久订阅者. 对于持久订阅者而言,只要订阅了某 ...

  8. CSS-3 Transform 的使用

    CSS3制作动画的几个属性:变形(transform).转换(transition)和动画(animation)等更高级的CSS3技术.这篇主要是 Transform 的使用. Transform 字 ...

  9. supperset （python 2.7.12 + mysql）记录

    网上看到superset,比较感兴趣,虚机上搭一下,记录操作过程. 版本信息:CentOS 6.6 + python 2.7.12 + mysql 5.1.73 + setuptools 36.5.0 ...

  10. Python 入门基础1 --语言介绍

    本节目录: 一.编程语言介绍 二.python解释器介绍 三.安装python解释器 四.运行python程序的两种方式 五.变量 六.后期补充内容 一.编程语言介绍 1.机器语言: 直接用二进制编程 ...