js动态计算移动端rem
2024-05-09 05:59:38
在做移动端web app的时候，众所周知，移动设备分辨率五花八门，虽然我们可以通过CSS3的media query来实现适配，例如下面这样：
1 html {2 font-size : 20px;3 }4 @media only screen and (min-width: 401px){5 html {6 font-size: 25px !important;7 }8 }9 @media only screen and (min-width: 428px){
10 html {
11 font-size: 26.75px !important;
12 }
13 }
14 @media only screen and (min-width: 481px){
15 html {
16 font-size: 30px !important;
17 }
18 }
19 @media only screen and (min-width: 569px){
20 html {
21 font-size: 35px !important;
22 }
23 }
24 @media only screen and (min-width: 641px){
25 html {
26 font-size: 40px !important;
27 }
28 }
但是这种做法并不能适配所有设备，于是就有了实现全适配的JS解决方案，例如下面这样:
1 ;(function (doc, win, undefined) {2 var docEl = doc.documentElement,3 resizeEvt = 'orientationchange' in win? 'orientationchange' : 'resize',4 recalc = function () {5 var clientWidth = docEl.clientWidth;6 if (clientWidth === undefined) return;7 docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';8 };9 if (doc.addEventListener === undefined) return;
10 win.addEventListener(resizeEvt, recalc, false);
11 doc.addEventListener('DOMContentLoaded', recalc, false)
12 })(document, window);
13
另外附上淘宝移动端适配解决方案flexible.js源码:
1 ;(function(win, lib) {2 var doc = win.document;3 var docEl = doc.documentElement;4 var metaEl = doc.querySelector('meta[name="viewport"]');5 var flexibleEl = doc.querySelector('meta[name="flexible"]');6 var dpr = 0;7 var scale = 0;8 var tid;9 var flexible = lib.flexible || (lib.flexible = {});10 11 if (metaEl) {12 //将根据已有的meta标签来设置缩放比例13 var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);14 if (match) {15 scale = parseFloat(match[1]);16 dpr = parseInt(1 / scale);17 }18 } else if (flexibleEl) {19 var content = flexibleEl.getAttribute('content');20 if (content) {21 var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);22 var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);23 if (initialDpr) {24 dpr = parseFloat(initialDpr[1]);25 scale = parseFloat((1 / dpr).toFixed(2)); 26 }27 if (maximumDpr) {28 dpr = parseFloat(maximumDpr[1]);29 scale = parseFloat((1 / dpr).toFixed(2)); 30 }31 }32 }33 34 if (!dpr && !scale) {35 var isAndroid = win.navigator.appVersion.match(/android/gi);36 var isIPhone = win.navigator.appVersion.match(/iphone/gi);37 var devicePixelRatio = win.devicePixelRatio;38 if (isIPhone) {39 // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案40 if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) { 41 dpr = 3;42 } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){43 dpr = 2;44 } else {45 dpr = 1;46 }47 } else {48 // 其他设备下，仍旧使用1倍的方案49 dpr = 1;50 }51 scale = 1 / dpr;52 }53 54 docEl.setAttribute('data-dpr', dpr);55 if (!metaEl) {56 metaEl = doc.createElement('meta');57 metaEl.setAttribute('name', 'viewport');58 metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');59 if (docEl.firstElementChild) {60 docEl.firstElementChild.appendChild(metaEl);61 } else {62 var wrap = doc.createElement('div');63 wrap.appendChild(metaEl);64 doc.write(wrap.innerHTML);65 }66 }67 68 function refreshRem(){69 var width = docEl.getBoundingClientRect().width;70 if (width / dpr > 540) {71 width = 540 * dpr;72 }73 var rem = width / 10;74 docEl.style.fontSize = rem + 'px';75 flexible.rem = win.rem = rem;76 }77 78 win.addEventListener('resize', function() {79 clearTimeout(tid);80 tid = setTimeout(refreshRem, 300);81 }, false);82 win.addEventListener('pageshow', function(e) {83 if (e.persisted) {84 clearTimeout(tid);85 tid = setTimeout(refreshRem, 300);86 }87 }, false);88 89 if (doc.readyState === 'complete') {90 doc.body.style.fontSize = 12 * dpr + 'px';91 } else {92 doc.addEventListener('DOMContentLoaded', function(e) {93 doc.body.style.fontSize = 12 * dpr + 'px';94 }, false);95 }96 97 98 refreshRem();99
100 flexible.dpr = win.dpr = dpr;
101 flexible.refreshRem = refreshRem;
102 flexible.rem2px = function(d) {
103 var val = parseFloat(d) * this.rem;
104 if (typeof d === 'string' && d.match(/rem$/)) {
105 val += 'px';
106 }
107 return val;
108 }
109 flexible.px2rem = function(d) {
110 var val = parseFloat(d) / this.rem;
111 if (typeof d === 'string' && d.match(/px$/)) {
112 val += 'rem';
113 }
114 return val;
115 }
116
117 })(window, window['lib'] || (window['lib'] = {}));
1 ;(function(win, lib) {2 var doc = win.document;3 var docEl = doc.documentElement;4 var metaEl = doc.querySelector('meta[name="viewport"]');5 var flexibleEl = doc.querySelector('meta[name="flexible"]');6 var dpr = 0;7 var scale = 0;8 var tid;9 var flexible = lib.flexible || (lib.flexible = {});10 11 if (metaEl) {12 //将根据已有的meta标签来设置缩放比例13 var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);14 if (match) {15 scale = parseFloat(match[1]);16 dpr = parseInt(1 / scale);17 }18 } else if (flexibleEl) {19 var content = flexibleEl.getAttribute('content');20 if (content) {21 var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);22 var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);23 if (initialDpr) {24 dpr = parseFloat(initialDpr[1]);25 scale = parseFloat((1 / dpr).toFixed(2)); 26 }27 if (maximumDpr) {28 dpr = parseFloat(maximumDpr[1]);29 scale = parseFloat((1 / dpr).toFixed(2)); 30 }31 }32 }33 34 if (!dpr && !scale) {35 var isAndroid = win.navigator.appVersion.match(/android/gi);36 var isIPhone = win.navigator.appVersion.match(/iphone/gi);37 var devicePixelRatio = win.devicePixelRatio;38 if (isIPhone) {39 // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案40 if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) { 41 dpr = 3;42 } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){43 dpr = 2;44 } else {45 dpr = 1;46 }47 } else {48 // 其他设备下，仍旧使用1倍的方案49 dpr = 1;50 }51 scale = 1 / dpr;52 }53 54 docEl.setAttribute('data-dpr', dpr);55 if (!metaEl) {56 metaEl = doc.createElement('meta');57 metaEl.setAttribute('name', 'viewport');58 metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');59 if (docEl.firstElementChild) {60 docEl.firstElementChild.appendChild(metaEl);61 } else {62 var wrap = doc.createElement('div');63 wrap.appendChild(metaEl);64 doc.write(wrap.innerHTML);65 }66 }67 68 function refreshRem(){69 var width = docEl.getBoundingClientRect().width;70 if (width / dpr > 540) {71 width = 540 * dpr;72 }73 var rem = width / 10;74 docEl.style.fontSize = rem + 'px';75 flexible.rem = win.rem = rem;76 }77 78 win.addEventListener('resize', function() {79 clearTimeout(tid);80 tid = setTimeout(refreshRem, 300);81 }, false);82 win.addEventListener('pageshow', function(e) {83 if (e.persisted) {84 clearTimeout(tid);85 tid = setTimeout(refreshRem, 300);86 }87 }, false);88 89 if (doc.readyState === 'complete') {90 doc.body.style.fontSize = 12 * dpr + 'px';91 } else {92 doc.addEventListener('DOMContentLoaded', function(e) {93 doc.body.style.fontSize = 12 * dpr + 'px';94 }, false);95 }96 97 98 refreshRem();99
100 flexible.dpr = win.dpr = dpr;
101 flexible.refreshRem = refreshRem;
102 flexible.rem2px = function(d) {
103 var val = parseFloat(d) * this.rem;
104 if (typeof d === 'string' && d.match(/rem$/)) {
105 val += 'px';
106 }
107 return val;
108 }
109 flexible.px2rem = function(d) {
110 var val = parseFloat(d) / this.rem;
111 if (typeof d === 'string' && d.match(/px$/)) {
112 val += 'rem';
113 }
114 return val;
115 }
116
117 })(window, window['lib'] || (window['lib'] = {}));转载于:https://www.cnblogs.com/mgqworks/p/7736372.html
js动态计算移动端rem相关推荐
- 移动端布局js动态计算rem
rem原理: 其实rem布局的本质是等比缩放,一般是基于宽度,通过更改html元素的font-size字体大小,就可以让子元素实际大小发生变化 推荐一篇文章: https://segmentfault ...
- nuxt.js实战之移动端rem
nuxt.js的项目由于是服务端渲染,通过js动态调整不同尺寸设备的根字体这种rem方案存在一种缺陷.由于设置字体的代码不能做服务端渲染,导致服务端返回的代码一开始没有相应的跟字体,直到与前端代码进行 ...
- flexible.js淘宝移动端rem自适应用法
1.设置视窗,如下两种都行 <!-- <meta name="viewport" content="width=device-width,user-scala ...
- 原生JS动态计算输入框文本内容的宽度，当内容宽度超过输入框的宽度时可控
需求场景:左边输入框输入内容,右边输入框用placeholder展示,当placeholder的内容宽度超过右边输入框的宽度时,placeholder强行替换为"请选择" 注意事项 ...
- 第148天：js+rem动态计算font-size的大小，适配各种手机设备
需求: 在不同的移动终端设备中实现,UI设计稿的等比例适配. 方案: 布局排版都用rem做单位,然后不同宽度的屏,js动态计算根节点的font-size. 假设设计稿是宽750px来做的,书写css方 ...
- 理解 css rem与动态计算rem
1.rem定义? 首先css3规定1rem = html根节点的font-size,rem也就是root em简写. 为了方便计算通常设置根节点font-size = 100px 那么 1rem = ...
- vue中设置html的fontsize,vue中rem布局使用js动态改变fontsize
rem布局原理:使用js动态改变html的字体大小+rem的特性,来保证最初的设计图中每个元素的尺寸比例不变,以适用于不同尺寸的设备能够正常显示. (function (doc, win) { var ...
- html设置根rem,经过js动态设置根元素的rem方案
rem目前是响应式开发移动端一个很重要也是经常使用的一个元素,可是在网上看的各类文章都会超级懵逼.因此我在下面给出两个方案,也列举出使用方法,让你们一目了然.前提是设计稿以750为准.其中测试的设计稿 ...
- jQuery实现PC端商城购物车模块基本功能（每个商品的小计和合计都会根据添加和删除的操作来动态计算）
jQuery实现PC端商城购物车模块基本功能 先上效果图: 因为主要是想练习jQuery的使用,所以页面CSS部分比较简陋,有需要的话,大家在参考代码时,可以自己再完善下CSS部分的代码,让购物车页面 ...
- java 月份适配计算_js+rem动态计算font-size的大小适配各种手机设备
需求:在不同的移动终端设备中实现,UI设计稿的等比例适配. 方案:使用js动态改变html的字体大小font-size+rem的特性,来保证最初的设计图中每个元素的尺寸比例不变,以适用于不同尺寸的设备 ...
最新文章
- React 组件生命周期
- Python情感分析：鹿晗的粉丝们究竟原谅他了吗？
- ios的 UIButton
- 辅助类——记录错误信息
- 升讯威微信营销系统开发实践：（3）中控服务器的设计 .Net 还是 Java？
- wordpress模板-RIPro-V2子主题V1.4-VAN主题
- 《我的WCF之旅》博文系列汇总
- PHP html 转换成PDF wkhtmltopdf HTML 转换成 PDF (JAVA C#都适用)
- 【数据结构 严蔚敏版】 链表基本操作
- C语言sqrt求平方根函数注意点
- python自主学习——Unicode
- 项目沟通管理和项目干系人管理
- DDR SDRAM内存测试的一种官方方案（简单易懂）
- 8cm等于多少像素_PPT尺寸你们都设置成多少（我问的不是分辨率像素，而是长、高尺寸）？...
- NGFW module恢复密码操作方法
- halcon循环语句，条件句结构格式
- Webyog Sqlyog Ultimate_12.5.1最新版完美破解（带注册码）
- word文档生成目录的方法，word生成目录之后怎么修改页码
- Oracle的12c版本打补丁
- 中华英才网三千员工全部裁员引争议