rem字体在rem盒子里面不一样，或者不同的行解决
<!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的来计算的。
第二种方案(可行性方案，已在项目中实践)：
(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盒子里面不一样，或者不同的行解决的更多相关文章
- 移动端 rem字体的使用demo
<!doctype html> <html> <head> <meta charset="utf-8"> <title ...
- javascript控制rem字体大小
摘要:在写响应式H5页面的时候,我常常会用rem字体,为了兼容多个分辨率的设备,需要写多个@media标签,太麻烦并且不够精致,尤其是移动端的页面往往达不到我想要的效果,后来就用js替代了css的@m ...
- rem字体+百分比布局表格
效果图: 上源码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- 手机布局rem的使用(rem)
最后一堆代码是举例的全码. 一 直接<head>标签里套用以下,其他都不用 <script> document.documentElement.style.fontSize = ...
- rem字体响应式布局
引用js,自动算字体大小,响应式布局 <script> var iScale = 1; iScale = iScale / window.devicePixelRatio; documen ...
- 改造百度ueditor字体为rem及相关体会
提到富文本,可能大家都用到过百度的ueditor,作为一个重量级的插件,总结起来一句话,功能很强大,使用很费心.不知道是不是太久没有维护了,ueditor的文档可读性还真是差也可能是悟性不够吧.本文也 ...
- px,em,rem字体单位
1.px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的.(引自CSS2.0手册) 2.em是相对长度单位.相对于当前对象内文本的字体尺寸,em存在值继承问题. 浏览器的默认字 ...
- Rem 字体设置学习一
JS方法动态计算根元素的字体大小: [淘宝首页:m.taobao.com] (function (doc, win) { var docEl = doc.documentElement, resize ...
- CSS3字体大小rem属性用法
PX为单位 在Web页面初期制作中,我们都是使用“px”来设置我们的文本,因为他比较精确和固定. 只要页面某元素设置了px字体大小,其子元素/子孙元素未设置字体大小或设置的字体大小css优先级没父元素 ...
随机推荐
- p2p视频点播系统开发案例――Myseelite
项目地址:http://sourceforge.net/projects/myseelite/ 1. MySee公司倡导的开源项目,目前国内功能最强大的一个开源系统. 2. 一个直播(也支持轮播.点播 ...
- shader学习推荐
<DirectX 9.0 3D游戏开发编程基础> 当您理解了如何实现顶点着色器和像素着色器之后,接下来您可能想进一步了解使用这两种着色器能够实现哪些效果. 最好的方式就是研究一下现有的各种 ...
- bzoj 1927 星际竞速 —— 最小费用最大流
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1927 首先注意到这是个DAG: 考虑每个点从哪里来,可以是瞬移来的,也可以是从某个点走过来的 ...
- IIC编程1：i2c-tools使用
安装: apt-get install libi2c-dev i2c-tools 检测i2c总线数目 用i2cdetect检测有几组i2c总线在系统上: i2cdetect -l 可以看到系统中有9组 ...
- 影响Scala语言设计的因素列表
Scala语言设计概述 Scala的设计受许多编程语言和研究思想的影响.事实上,仅很少的Scala的特点是全新的:大多数都已经被以另外的形式用在其他语言中了.Scala的革新主要来源于它是如何构造并放 ...
- asp弹出层
asp弹出层 <style type="text/css"> html, body { height: %; width: %; } .white_content { ...
- jquery获取设置服务器控件的方法
jquery获取设置服务器控件的方法 获取TextBox,HiddenField,Label的值.例如: <asp:TextBox ID="txtBoxID" runat=& ...
- mysql-日志种类
MySQL有以下几种日志: 1,错误日志:记录启动.运行或停止时出现的问题,一般也会记录警告信息. 2,一般查询日志:记录建立的客户端连接和执行的语句. 3,慢查询日志:记录所有执行时间超过lo ...
- mongodb 操作数据库
1.使用和创建数据库: use mydb //没有就创建 2.显示数据库 show dbs 3.显示数据库状态 db.stats() 4.检查当前所用的数据库 db 5.删除数据库(先用然后删除) u ...
- ubuntu server usb安装盘制作问题
本来服务器上装的是windows server 2003,开多个虚拟机装linux来用,但发现不管是vmware还是virtualbox,总是有内存泄漏,大约2个星期左右16G内存就全没了,任务管理器 ...