移动端rem自适应方案
2024-09-04 08:41:57
一般设计师给我们的设计稿尺寸都为750*1340 ..
网易,淘宝移动端首页上html元素的font-size
目前就先说一下网易的做法
引入下面这段js,用于计算动态的font-size
(function(doc, win) {
var docEl = doc.documentElement,
isIOS = navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
dpr = isIOS ? Math.min(win.devicePixelRatio, ) : ,//iframe引用时,禁止缩放
dpr = ,
scale = / dpr,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
docEl.dataset.dpr = dpr;
var metaEl = doc.createElement('meta');
metaEl.name = 'viewport';
metaEl.content = 'initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale;
docEl.firstElementChild.appendChild(metaEl);
var recalc = function() {
var width = docEl.clientWidth;
if(width / dpr > ) {
width = * dpr;
} 这个if判断是判断大于750的情况下 恒等于750
// 乘以100,px : rem = 100 : 1
docEl.style.fontSize = * (width / ) + 'px';
};
recalc()
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
})(document,window);
换算方式就是1rem = 100px(注意是设计稿为750)
最新文章
- 浅谈TypeScript
- 最短路问题Dijkstra算法
- 关于 HTTP 请求头的内容
- Oracle日期周详解IW
- Javascript获取URL地址变量参数值的方法
- 微软IIS服务器的最佳优化工具- IIS Tuner
- Java中线程顺序执行
- 3n+1
- 使用Java创建RESTful Web Service(转)
- 剑指Offer-翻转单词顺序列
- Python3.x - 字符串
- InfluxDB基本概念和操作
- 1002-过河卒-洛谷-luogu-动态规划dp
- SpringBoot日记——ElasticSearch全文检索
- Nginx使用rewrite重新定向
- C#开发Unity游戏教程循环遍历做出判断及Unity游戏示例
- Java 内存模型及GC原理 (转载)
- [转]logging使用
- PHP学习方法总结
- HTTP相关知识点
热门文章
- django 搭建一个投票类网站(一)
- MySQL加号+ 的作用
- Windows下Go安装&;环境配置&;编译运行
- C#常见几种集合比较
- 微信环境中如何实现跳转到手机默认外部浏览器下载apk文件
- 解决安装VMware Player出错,提示安装程序无法继续,microsoft runtime dll安装程序未能完成安装
- 2.2 selenium:org.openqa.selenium.WebDriverException: f.QueryInterface is not a function
- Java 动态代理实现
- lees入门
- 吴裕雄 python 机器学习——KNN回归KNeighborsRegressor模型