<!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. 【转】CSS制作图形速查表-存档

      http://www.w3cplus.com/css/css-simple-shapes-cheat-sheet http://www.cnblogs.com/powertoolsteam/p/c ...

  2. DC/DC尖峰脉冲吸收电路

    在DC/DC转换器中,脉冲问题直接影响到产品的EMI和电源噪声,需要在某些时候加尖峰脉冲吸收电路. 从上图可以看到,尖峰脉冲吸收电路就是一个RC吸收电路.至于在DC/DC哪里加RC吸收电路,这里有一个 ...

  3. poj 2388 Who's in the Middle（快速排序求中位数）

    一.Description FJ is surveying his herd to find the most average cow. He wants to know how much milk ...

  4. 【转】 Pro Android学习笔记（二七）：用户界面和控制（15）：FrameLayout

    FrameLayout FrameLayout通常只包含一个控件.如果我们在FrameLayout中设置多个控件,则第二个控件会堆叠在第一个控件上面,如此类推,一层一层地叠上去.下面的例子,我们在Fr ...

  5. oracle--基础查询（1）

    --查询所有列语句 select * from emp; ---查询指定列表的查询语句 select empno,ename,sal from emp; --带有简单算术运算符的简单查询 select ...

  6. node包管理工具nvm

    去NVM官网下载NVM压缩包,下载nvm-setup.zip,直接傻瓜式安装 安装成功后运行命令: nvm -v 常用命令: nvm install <version> ## 安装指定版本 ...

  7. sql 根据年份、月份查询数据

    CREATE TABLE [dbo].[T_UserAccess]( ,) NOT NULL, [UserId] [int] NULL, [UserType] [int] NULL, ) NULL, ...

  8. CoreData的使用（IOS学习）

    ——杂言:最近开始学习IOS7的开发,下文是在已经建好的项目里加入CoreData的结构,并实现一个基于coredata的简单save,query. 1. 引入Core Data Framework. ...

  9. Spirng+In+Action(Craig Walls Ryan Breidenbach)

    目录 1.开始Spring之旅(简介) 2.装配Bean(IoC) 3.创建切面(AOP) ... 第一章:开始Spring之旅 1.1 为什么使用Spring:简化了企业级系统开发. 1.1.1 j ...

  10. shell自动收集服务器硬件系统信息

    shell自动收集服务器硬件系统信息,插入数据库并通过web页面显示. 一,shell自动收集服务器硬件系统信息,插入数据库.#centos 7操作系统下 #!/bin/bash #auto get ...