<!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. android 应用程序Activity之间数据传递与共享的几种途径

    一.基于消息的通信机制 Intent ---boudle ,extraAndroid为了屏蔽进程的概念,利用不同的组件[Activity.Service]来表示进程之间的通信!组件间通信的核心机制是I ...

  2. 动态调试smali代码学习记录

    预备知识 DDMS Dalvik Debug Monitor Serivce,Dalvik调试监控服务,为Android SDK提供的一款拥有监控Dalvik虚拟机的调试软件,启动文件位于<An ...

  3. APIO2017商旅

    传送门(PDF) 题目大意:有$N$个点,$M$条有向边,$K$种物品,在不同的点可以用不同的价格买入或卖出某一种商品. 任意时刻至多持有一种物品,不能在同一个点先买再卖,求收益与长度之比最大的点数$ ...

  4. AngularJS方法 —— angular.bind

    描述: 上下文,函数以及参数动态绑定,返回值为绑定之后的函数. 其中args是可选的动态参数,self在fn中使用this调用. 使用方法: angular.bind(self,fn,args ); ...

  5. ACM学习历程——UVA 127 "Accordian" Patience(栈;模拟)

    Description  ``Accordian'' Patience  You are to simulate the playing of games of ``Accordian'' patie ...

  6. 洛谷 P4525 & P4526 [模板] 自适应辛普森积分

    题目:https://www.luogu.org/problemnew/show/P4525 https://www.luogu.org/problemnew/show/P4526 学习辛普森积分:h ...

  7. Poj 1973 Software Company(二分+并行DP)

    题意:软件公司接了两个项目,来自同一个合同,要一起交付.该公司有n个程序猿来做这两个项目A和B,每个项目都被分为m个子项目,给定每个程序猿做一个A中的子项目需要的时间Xi秒,和做B中的子项目所需时间Y ...

  8. 【转】Pro Android学习笔记(三十):Menu(1):了解Menu

    目录(?)[-] 创建Menu MenuItem的属性itemId MenuItem的属性groupId MenuItem的属性orderId MenuItem的属性可选属性 Menu触发 onOpt ...

  9. Python模块-logging模块(二)

    logging模块记录日志有四个主要类:logger,handler,formatter,filter logger提供了应用程序可以直接使用的接口,每个程序在输出信息之前都要获得一个Logger h ...

  10. SpringMvc之参数绑定注解详解之四

    简介: @RequestBody 作用: i) 该注解用于读取Request请求的body部分数据,使用系统默认配置的HttpMessageConverter进行解析,然后把相应的数据绑定到要返回的对 ...