移动端rem设置(部分安卓机型不兼容)
- (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设置(部分安卓机型不兼容)的更多相关文章
- 【移动端debug-3】部分安卓机型不触发touchend事件的解决方案
最近在项目中遇到一个奇怪的问题,有一个需求是这样:页面上有一个按钮,滚动页面时让它消失,停止滚动时让它显示. 常规思路: step1.监听touchstart事件,记录Touch对象中pageY初始值 ...
- 移动端rem设置,自动更改html<font-size>
<script> (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchang ...
- 移动端使用rem同时适应安卓ios手机原理解析,移动端响应式开发
rem单位大家可能已经很熟悉,rem是随着html的字体大小来显示代表宽度的方法,我们怎样进行移动端响应式开发呢 浏览器默认的字体大小为16px 及1rem 等于 16px 如果我们想要使1rem等于 ...
- H5页面适配所有iPhone和安卓机型的六个技巧
http://www.th7.cn/web/html-css/201605/166006.shtml http://www.th7.cn/web/html-css/201601/153127.shtm ...
- 移动端开发ios和安卓兼容问题
移动端开发ios和安卓兼容问题 最近做移动端混合开的时候遇到一些安卓和iOS的兼容性问题,兼容想问题不仅在浏览器存在也在APP开发当中也会经常遇到这样的情况. 最近看了一下内容很不错的移动端开发相关的 ...
- 谈谈我的移动端rem适配方案
最近有点怀疑人生,毕竟一个人写前端,有时候会怀疑自己理解的一些东西包括用法有没有符合标准.趁着这阵子闲下来,翻了翻别人的rem适配博客,发现有点绕口,怪自己是个强迫症,啥都要自己去试试结果并从中理解, ...
- 部分安卓机型1px边框无法显示解决方法
实践发现css样式中使用1px solid 在部分安卓机型无法显示. 网上找到解决方案:使用行内样式设置边框.
- 第130天:移动端-rem布局
一.关于布局方案 当拿到设计师给的UI设计图,前端的首要任务就是布局和样式,相信这对于大部分前端工程师来说已经不是什么难题了.移动端的布局相对PC较为简单,关键在于对不同设备的适配.之前介绍了一篇关于 ...
- 07. 如何实现移动端rem适配
如何实现移动端rem适配 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
随机推荐
- Entity FrameWork 操作使用详情
Entity FrameWork 是以ADO.net为基础发展的ORM解决方案. 一.安装Entity FrameWork框架 二.添加ADO.Net实体数据模型 三.EF插入数据 using Sys ...
- Git更新代码
此次更新,创建新的文件与文件夹,并且删除了原有文件 通过“git status” 命令查看当前变更.通过变更信息可以看出,删除了test_case.py文件.这个删除只是在项目目录下进行删除,Git对 ...
- react-native 横向滚动的商品展示
在app中会有这种页面 像这样商品是横向的,而且要滚动,思路是利用 ScrollView 横向的滚动 思路: (a): 横向滚动的整体作为一个组件 ShopCenter {/*** 横向滚动 *** ...
- markdown让文字居中和带颜色
markdown让文字居中和带颜色 markdown让文字居中和带颜色1.说明2. 文字的居中3.文字的字体及颜色3.1 字体更换3.2 大小更换3.3 颜色替换4 总结 1.说明 本文主要叙述如何写 ...
- S-HR界面控件赋值取值
属性值: this.getField("entrys.variationReason").shrPromptBox("getValue").name
- 写代码怎能不会这些Linux命令?
转自:https://zhuanlan.zhihu.com/p/28674639?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=to ...
- UVA 10159
http://blog.csdn.net/metaphysis/article/details/6926997 先向作者表达一下敬佩吧,十分巧妙地利用了状态压缩. 这道题有点组合数学的味道,当一个格子 ...
- Keil5.15使用GCC编译器链接.a库文件
我们知道,当使用第三方的代码时,人家有可能会扔个Lib文件给你.这时候,别人仅仅要提供header文件给你,则你就能够通过Lib文件及header的函数声明,对Lib中的函数进行调用.在Keil中假设 ...
- 监控sql运行时剩余时间
--监控sql执行时剩余时间 你知道正在执行的sql大概须要多长时间么? 你知道正在执行的sql大概完毕了百分之几么? 你知道正在执行的sql大概还要多长时间完毕么? V$SESSION_LONGOP ...
- 逻辑运算0==x和x==0具体解释
看很多大牛写的程序经常看到if(0==x){运行体},而自己写的程序常用if(x==0){运行体}.刚開始的时候我还非常自信的觉得这样的表达方式是等价的,大牛们仅仅是为了显摆下与众不同的格调.当读到C ...