(function(win) {
var doc = win.document;
var docEl = doc.documentElement;
var tid;
function refreshRem() {
var width = docEl.getBoundingClientRect().width;
if (width > 640) { // 最大宽度
width = 640;
}
var rem = width / 10; // 将屏幕宽度分成10份, 1份为1rem
docEl.style.fontSize = rem + 'px';
}
win.addEventListener('resize', function() {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}, false);
win.addEventListener('pageshow', function(e) {
if (e.persisted) {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}
}, false);
refreshRem();
console.log(docEl.style.fontSize)
})(window);

移动端rem设置(部分安卓机型不兼容)的更多相关文章

  1. 【移动端debug-3】部分安卓机型不触发touchend事件的解决方案

    最近在项目中遇到一个奇怪的问题,有一个需求是这样:页面上有一个按钮,滚动页面时让它消失,停止滚动时让它显示. 常规思路: step1.监听touchstart事件,记录Touch对象中pageY初始值 ...

  2. 移动端rem设置,自动更改html<font-size>

    <script> (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchang ...

  3. 移动端使用rem同时适应安卓ios手机原理解析,移动端响应式开发

    rem单位大家可能已经很熟悉,rem是随着html的字体大小来显示代表宽度的方法,我们怎样进行移动端响应式开发呢 浏览器默认的字体大小为16px 及1rem 等于 16px 如果我们想要使1rem等于 ...

  4. H5页面适配所有iPhone和安卓机型的六个技巧

    http://www.th7.cn/web/html-css/201605/166006.shtml http://www.th7.cn/web/html-css/201601/153127.shtm ...

  5. 移动端开发ios和安卓兼容问题

    移动端开发ios和安卓兼容问题 最近做移动端混合开的时候遇到一些安卓和iOS的兼容性问题,兼容想问题不仅在浏览器存在也在APP开发当中也会经常遇到这样的情况. 最近看了一下内容很不错的移动端开发相关的 ...

  6. 谈谈我的移动端rem适配方案

    最近有点怀疑人生,毕竟一个人写前端,有时候会怀疑自己理解的一些东西包括用法有没有符合标准.趁着这阵子闲下来,翻了翻别人的rem适配博客,发现有点绕口,怪自己是个强迫症,啥都要自己去试试结果并从中理解, ...

  7. 部分安卓机型1px边框无法显示解决方法

    实践发现css样式中使用1px solid 在部分安卓机型无法显示. 网上找到解决方案:使用行内样式设置边框.

  8. 第130天:移动端-rem布局

    一.关于布局方案 当拿到设计师给的UI设计图,前端的首要任务就是布局和样式,相信这对于大部分前端工程师来说已经不是什么难题了.移动端的布局相对PC较为简单,关键在于对不同设备的适配.之前介绍了一篇关于 ...

  9. 07. 如何实现移动端rem适配

    如何实现移动端rem适配 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

随机推荐

  1. We wanted {"required":["value"]} and you sent ["text","value","id","sessionId"]

    重装python pycharm后再次执行以前执行没有问题的Appium脚本报错 We wanted {"required":["value"]} and yo ...

  2. git 还原到某次commit

    不可逆提交 一,reset 1.git log查看提交记录 git log 2.选择某次提交的commit ID,ctrl+c复制提交ID 3.使用git reset –hard 还原到某一次提交 g ...

  3. yum的方式搭建mysql

    1.安装相应的软件yum install mysql : 安装mysql客户端 yum install mysql-server 安装服务端 yum install mysql-devel 安装相关的 ...

  4. [kernel学习]----好文章梳理

    内存相关 Linux的内存回收和交换 Linux内核分析:页回收导致的cpu load瞬间飙高的问题分析与思考 认识Linux物理内存回收机制 认真分析mmap:是什么 为什么 怎么用 kernel排 ...

  5. Pycharm中Git、Github的简单使用和配置

    Pycharm中Git.Github的使用 PyCharm本身自带了git,稍微配置一下就可以很好的在图形界面下进行Python项目的版本控制 配置Git 在配置前先新建一个项目,当然也可以打开已有的 ...

  6. win7 VMware下安装centos和Ubuntu共存

      最近在空闲时间学习Linux环境中各种服务的安装与配置,都属于入门级别的,这里把所有的学习过程记录下来,和大家一起分享. 我的电脑系统是win7,所以我需要在win7上安装一个虚拟机-VMware ...

  7. VC2010常见问题的解决方案

    vc++里面的obj文件是什么文件Project(项目)中每个cpp经编译成为obj(object)目标文件,所有obj文件和资源文件经链接(link)成为可执行文件,obj文件可称为目标文件或中间文 ...

  8. 洛谷——P1507 NASA的食物计划

    https://www.luogu.org/problem/show?pid=1507#sub 题目背景 NASA(美国航空航天局)因为航天飞机的隔热瓦等其他安 全技术问题一直大伤脑筋,因此在各方压力 ...

  9. eclipse重置页面恢复到最初布局状态

    eclipse重置页面恢复到最初布局状态 window->perspective->reset perspective

  10. git merge和git rebase的区别和异同

    1.git  merge和git rebase作用差不多,都是将远程代码和本地代码合并 2.git  merge和git rebase作用差不多,都是将远程代码和本地代码合并 3.git  merge ...