<!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. Convolutional Neural Networks for Visual Recognition 3

    Gradient Computing 前面我们介绍过分类器模型一般包含两大部分,一部分是score function,将输入的原始数据映射到每一类的score,另外一个重要组成部分是loss func ...

  2. 解决编译warning：warning: ‘MeteringUnit::voltage_gain_’ will be initialized after [-Wreorder]

    问题: 环境:ubuntu 12.04,g++版本4.6.3,编译目标文件时出现warnings: u1204@u1204-zhw:~/hwsvn/2sw/4prj_mips/UCP_rt5350/s ...

  3. 一：ORM关系对象映射（Object Relational Mapping，简称ORM）

    狼来的日子里! 奋发博取 10)django-ORM(创建,字段类型,字段参数) 一:ORM关系对象映射(Object Relational Mapping,简称ORM) ORM分两种: DB fir ...

  4. DEBUG命令说明

    Debug在学习汇编的过程中,担任着一个非常重要的角色,是一个极其重要的调试工具,所以学会它是必须得. 命令格式 功能说明 A [地址] 输入汇编指令 C [范围] 起始地址 对由“范围”指定的区域与 ...

  5. Docker容器里的进程为什么要前台运行

    <第一本Docker书>里面,讲到Docker容器启动web服务时,都指定了前台运行的参数,例如apache: ENTRYPOINT [ "/usr/sbin/apache2&q ...

  6. 游戏中的 2D 可见性

    转自:http://www.gameres.com/469173.html 拖动圆点转一圈,看看玩家都能看到些什么: 这个算法也能计算出给定光源所照亮的区域.对每条光线,我们可以构建出被照亮区域的光线 ...

  7. word2010以上版本中快捷录入数学公式的方法（二）

    以前推荐的方法,随着方正飞翔网站上关闭了数学公式输入法的支持也不能不用了,现在再推荐一个可以在word2010以上版中快捷输入数学公式的方法,安装AxMath,一切问题都OK!我是直接购买的正版,25 ...

  8. popup的简单应用举例

    一.首先说一下自执行函数 1. 立即执行函数是什么?也就是匿名函数 立即执行函数就是 声明一个匿名函数 马上调用这个匿名函数 2.popup的举例 点击,弹出一个新的窗口.保存完事,页面不刷新数据就返 ...

  9. cdh 安装组件 异常总结

    hive 启动 要 把mysql的jar包放到/opt/cloudera/parcels/CDH-5.9.3-1.cdh5.9.3.p0.4/lib/hive/lib 下 假设有3个节点就要放3次

  10. vue.js解决刷新404找不到页面问题

    1.将包解压到ROOT目录后创建WEB-INF目录 mkdir WEB-INF 2.进入WEB-INF目录,创建web.xml文件 cd WEB-INF touch web.xml 3.编辑web.x ...