彻底搞好rem 与js的监控
什么是rem
在我看来,rem就是1rem单位就等于html节点fontsize的像素值。所以改变html节点的fontsize是最为关键的一步。根据手机宽度改变相对大小就可以实现自适应了,就不用什么媒体查询那些的。
我们的设计图往往宽度是640或者其他尺寸的,不过我建议是用这个尺寸,以640为基准,以小到大,实现自适应,下面实现的比例为1rem=40px(640宽度)。
为什么这样搞?
这样一套代码就搞定手机端尺寸自适应,不需要媒体查询,而且利用Sass和Less能够给我们节约更多的时间,以及更好的体验。
扩展
因为是要计算rem的值,所以我们前端在看到设计图量尺寸的时候会去计算下这个东西,需要花费一些时间,所以我提供了Sass(不知道的自己去百度)和Less(不知道的自己去百度)相对变量的代码,
Sass相对变量地址:Sass相对变量
Less相对变量地址:Less相对变量
打开页面,1-400的相对变量都在上面,只需要全选复制,然后放入你的项目中,直接拿来用就是了,当然我写的css雪碧图生成工具也会用到里面的变量,大家不妨一试。
手机自适应代码
下面的代码是拷贝自淘宝的手机app,当然,我把有的变量还原了,有的注释了。
viewport标签
js代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
! function (win) { function resize() { var domWidth = domEle.getBoundingClientRect().width; if (domWidth / v > 540){ domWidth = 540 * v; } win.rem = domWidth / 16; domEle.style.fontSize = win.rem + "px" ; } var v, initial_scale, timeCode, dom = win.document, domEle = dom.documentElement, viewport = dom.querySelector( 'meta[name="viewport"]' ), flexible = dom.querySelector( 'meta[name="flexible"]' ); if (viewport) { //viewport:<meta name="viewport"content="initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5,user-scalable=no,minimal-ui"/> var o = viewport.getAttribute( "content" ).match(/initial\-scale=([ "']?)([\d\.]+)\1?/); if(o){ initial_scale = parseFloat(o[2]); v = parseInt(1 / initial_scale); } } else { if (flexible) { var o = flexible.getAttribute(" content ").match(/initial\-dpr=([" ']?)([\d\.]+)\1?/); if (o){ v = parseFloat(o[2]); initial_scale = parseFloat((1 / v).toFixed(2)) } } } if (!v && !initial_scale) { var n = (win.navigator.appVersion.match(/android/gi), win.navigator.appVersion.match(/iphone/gi)); v = win.devicePixelRatio; v = n ? v >= 3 ? 3 : v >= 2 ? 2 : 1 : 1, initial_scale = 1 / v } //没有viewport标签的情况下 if (domEle.setAttribute( "data-dpr" , v), !viewport) { if (viewport = dom.createElement( "meta" ), viewport.setAttribute( "name" , "viewport" ), viewport.setAttribute( "content" , "initial-scale=" + initial_scale + ", maximum-scale=" + initial_scale + ", minimum-scale=" + initial_scale + ", user-scalable=no" ), domEle.firstElementChild) { domEle.firstElementChild.appendChild(viewport) } else { var m = dom.createElement( "div" ); m.appendChild(viewport), dom.write(m.innerHTML) } } win.dpr = v; win.addEventListener( "resize" , function () { clearTimeout(timeCode), timeCode = setTimeout(resize, 300) }, false ); win.addEventListener( "pageshow" , function (b) { b.persisted && (clearTimeout(timeCode), timeCode = setTimeout(resize, 300)) }, false ); /* 个人觉得没必要完成后就把body的字体设置为12 "complete" === dom.readyState ? dom.body.style.fontSize = 12 * v + "px" : dom.addEventListener("DOMContentLoaded", function() { //dom.body.style.fontSize = 12 * v + "px" }, false); */ resize(); }(window); |
执行完代码后你的页面就会跟随手机的宽度而自适应了,根本就不用什么媒体查询那些,很简洁,很使用,站在巨人的肩膀上吧这就叫做!
彻底搞好rem 与js的监控的更多相关文章
- 搭建前端监控系统(二)JS错误监控篇
===================================================================== 前端性能监控系统: DEMO地址 GIT代码仓库地址 ...
- JS前端监控机制的建立
JS前端监控机制: 1.采用try...catch...,和window.onerror的形式. 2.最终形成错误日志文件,并发送邮件和短信的形式进行报警. 3.如果是跨域请求,在script标签上要 ...
- Webfunny知识分享:JS错误监控
现在的前端开发已不再是刀耕火种的年代了,各种框架.编译工具层出不穷,前端监控系统也不甘其后,遍地开花. 前端正承受着越来越重的职责,前端的业务也变得越来越复杂,此时此刻我们就更需要一套完善的监控系统来 ...
- 前端监控系列2 |聊聊 JS 错误监控那些事儿
作者:彭莉,火山引擎 APM 研发工程师.2020年加入字节,负责前端监控 SDK 的开发维护.平台数据消费的探索和落地. 有必要针对 JS 错误做监控吗? 我们可以先假设不对 JS 错误做监控,试想 ...
- Fundebug上线Node.js错误监控啦
作为全栈JavaScript错误实时监测平台,Fundebug的Node.js实时错误监测服务上线啦,我们能够帮助开发者及时,高效地发现并且解决Node.js错误,从而提高开发效率,并提升用户体验. ...
- rem自适应js
Rem自适应js---flexible.min.js 网上看到很多移动端适配的各种方法,由于原来工作中对rem的疏忽,所以决定重新学习rem~ 由于移动端特殊性,本文讲的是如何使用rem实现自适应 ...
- js error监控
window.onerror = function(message, source, lineno, colno, error) { ... } 功能参数: message:错误消息(字符串).eve ...
- rem适配布局(rem+less+媒体查询 和 rem+flexible.js)
1. rem 基础 rem 是一个相对单位,类似于 em ,em 是父元素字体大小. em 是相对于父元素 的字体大小来说的 rem 是相对于 html 元素 字体大小来说的 rem 优点 就是可以 ...
- three.js加入监控
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- 【bzoj1098】办公楼
[bzoj1098]办公楼 题意 FGD开办了一家电话公司.他雇用了N个职员,给了每个职员一部手机.每个职员的手机里都存储有一些同事的电话号码.由于FGD的公司规模不断扩大,旧的办公楼已经显得十分狭窄 ...
- 能源项目xml文件 -- springMVC-servlet.xml -- default-lazy-init
<beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w ...
- 作业3---for语句及分支结构else-if
1.本次课学习到的知识点: (1)for语句的一般表达式,执行顺序: (2)指定次序的循环程序设计:数列的累加.累乘等: (3)else-if实现的分支结构可以判断语句的真假 2.实验过程中遇到的问题 ...
- /etc/rc.d/与/etc/rc.d/init.d的关系
/etc/init.d指向/etc/rc.d/init.d目录 . 除了直接调用脚本外(如/etc/rc.d/init.d/xinetd),还可以用service命令来控制init.d目录下的服务如 ...
- SQL Server 用户名密码查看
因为SQL Server是默认使用Windows身份验证的,很多时间就会慢慢忘记掉原来设置的密码,那么怎么重新设置用户名密码呢 这里以SQL Server2013为例,先以windows身份验证登陆进 ...
- WPF:ListView 分组合并
CollectionViewSource 绑定的是从数据库取出的数据ListBind 以DeptName为分组依据 <Window.Resources> <CollectionVie ...
- javascript内置属性——arguments
arguments是javascript中的内置属性,可以直接调用函数的参数,作用类似Array,但本身并不是数组.这次发现它是为了实现封装函数,将不确定数量的数字乘积.比如function mult ...
- juery 实现下拉框多选 jquery-multiselect
效果: 除了jquery,需要引用的样式和js文件: <link rel="stylesheet" type="text/css" href=" ...
- foreach 循环遍历 以及函数的应用
foreach( 对集合每个元素的引用 in 集合 ){ } 举例: int[] a = new int[5]{1,2,3,4,5};foreach( int b in a ){ //b就是a中的每个 ...
- Linux设备驱动中的并发控制
1.并发是指多个执行单元同时.并行的执行.并发的执行单元对共享资源的访问很容易导致竞态. 在 Linux 内核中,主要的竞态发生于如下几种情况: ①对称多处理器(SMP)的多个 CPU ②单CPU内进 ...