<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>rem</title>

     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>

    <script type="text/javascript">

        function resizeEvt(){

        var ww = document.documentElement.clientWidth,

            drp = window.devicePixelRatio;

        //document.documentElement.style.fontSize = ww*drp/10+'px';iphone出问题。

        document.documentElement.style.fontSize = ww/10+'px';

        }

        document.addEventListener('DOMContentLoaded',resizeEvt,false);

        window.addEventListener('resize',resizeEvt,false);

    </script>

    <style type="text/css">

        *{

            margin: 0;

            padding: 0;

        }

        p{

            width:10rem;

            height:100%;

            font-size:.5rem;

        }

    </style>

</head>

<body>

    <p>

        无忧工作网版权所有无忧工作网版权所有无忧工作网版权所有无忧

    </p>

</body>

</html>
现在测试是不需要window.devicePixelRatio的
至少拿同事的iphone测试之后是不需要的。
原理：
把一个手机屏幕分成10份。每一份就是1/10的屏幕宽度。避免了设置
html{

    font-size:62.5%;

}

在chrome浏览器下，只能定义12px以上的字体。低于12px都是按照12px的来计算的。

第二种方案(可行性方案，已在项目中实践)：

http://f2ehacker.com/yyw/

(function (doc, win) {

     var docEl = doc.documentElement,

         resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

         recalc = function () {

     var clientWidth = docEl.clientWidth;

     if (!clientWidth) return;

         docEl.style.fontSize = Math.round( 100* (clientWidth / 750)) + 'px';

          };

          if (!doc.addEventListener) return;

     win.addEventListener(resizeEvt, recalc, false);

     doc.addEventListener('DOMContentLoaded', recalc, false);

 })(document, window);

注意：移动端字体一般不会低于14px;还有就是页面内部的滚动条需要添加css属性，保证流畅度：

-webkit-overflow-scrolling: touch;

rem字体在rem盒子里面不一样，或者不同的行解决的更多相关文章

  1. 移动端 rem字体的使用demo

        <!doctype html> <html> <head> <meta charset="utf-8"> <title ...

  2. javascript控制rem字体大小

    摘要:在写响应式H5页面的时候,我常常会用rem字体,为了兼容多个分辨率的设备,需要写多个@media标签,太麻烦并且不够精致,尤其是移动端的页面往往达不到我想要的效果,后来就用js替代了css的@m ...

  3. rem字体+百分比布局表格

    效果图: 上源码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  4. 手机布局rem的使用(rem)

    最后一堆代码是举例的全码. 一 直接<head>标签里套用以下,其他都不用 <script> document.documentElement.style.fontSize = ...

  5. rem字体响应式布局

    引用js,自动算字体大小,响应式布局 <script> var iScale = 1; iScale = iScale / window.devicePixelRatio; documen ...

  6. 改造百度ueditor字体为rem及相关体会

    提到富文本,可能大家都用到过百度的ueditor,作为一个重量级的插件,总结起来一句话,功能很强大,使用很费心.不知道是不是太久没有维护了,ueditor的文档可读性还真是差也可能是悟性不够吧.本文也 ...

  7. px,em,rem字体单位

    1.px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的.(引自CSS2.0手册) 2.em是相对长度单位.相对于当前对象内文本的字体尺寸,em存在值继承问题. 浏览器的默认字 ...

  8. Rem 字体设置学习一

    JS方法动态计算根元素的字体大小: [淘宝首页:m.taobao.com] (function (doc, win) { var docEl = doc.documentElement, resize ...

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

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

随机推荐

  1. es6的foreach循环遍历

    forEach forEach是Array新方法中最基本的一个,就是遍历,循环.例如下面这个例子: 结果: 这段代码相当于: for (var k = 0, length = array.length ...

  2. 无旋Treap - BZOJ1014火星人 & 可持久化版文艺平衡树

    !前置技能&概念! 二叉搜索树 一棵二叉树,对于任意子树,满足左子树中的任意节点对应元素小于根的对应元素,右子树中的任意节点对应元素大于根对应元素.换言之,就是满足中序遍历为依次访问节点对应元 ...

  3. luogu1353 Running

    dp[i][j]表示走i分钟疲劳值为j时的最远距离 然后搞一下就好啦 #include <iostream> #include <cstdio> #include <al ...

  4. bzoj 3754: Tree之最小方差树 模拟退火+随机三分

    题目大意: 求最小方差生成树.N<=100,M<=2000,Ci<=100 题解: 首先我们知道这么一个东西: 一些数和另一个数的差的平方之和的最小值在这个数是这些数的平均值时取得 ...

  5. PRVF-0002 : could not retrieve local node name

    安装 oracle 的时候,./runInstaller 启动报错  PRVF-0002 : could not retrieve local node name 碰到这个错误是因为 OUT试图对你主 ...

  6. vmware的双网卡以及Pro的注册码

    DC/OS的master需要能够上外网而且能够和本地内网设备交互,于是打算在虚拟机上面做测试,于是调研了一下虚拟机的双网卡配置.   最推荐的方式是使用vmware的station,而不是player ...

  7. jumpserver遇到的坑

    安装:https://github.com/jumpserver/jumpserver,看readme照着做就行,下面是遇到的坑.   0.4.4版坑: 1.要升级pip,否则有的包装不上   2.p ...

  8. 杂项-权限管理：Spring Secutity

    ylbtech-杂项-权限管理:Spring Secutity Spring Security是一个能够为基于Spring的企业应用系统提供声明式的安全访问控制解决方案的安全框架.它提供了一组可以在S ...

  9. 图解Stm32使用jlink下载程序时jtag接口(SW和JTAG模式)的简化方法

    转自: http://www.it165.net/embed/html/201308/2332.html 用过stm32的人都知道stm32有两种常用下载程序的方法,用串口和jlink.串口下载方法和 ...

  10. 大数据处理之道（十分钟学会Python）

    一:python 简介 (1)Python的由来 Python(英语发音:/ˈpaɪθən/), 是一种面向对象.解释型计算机程序设计语言,由Guido van Rossum于1989年底发明,第一个 ...