一般设计师给我们的设计稿尺寸都为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)

最新文章

  1. 浅谈TypeScript
  2. 最短路问题Dijkstra算法
  3. 关于 HTTP 请求头的内容
  4. Oracle日期周详解IW
  5. Javascript获取URL地址变量参数值的方法
  6. 微软IIS服务器的最佳优化工具- IIS Tuner
  7. Java中线程顺序执行
  8. 3n+1
  9. 使用Java创建RESTful Web Service(转)
  10. 剑指Offer-翻转单词顺序列
  11. Python3.x - 字符串
  12. InfluxDB基本概念和操作
  13. 1002-过河卒-洛谷-luogu-动态规划dp
  14. SpringBoot日记——ElasticSearch全文检索
  15. Nginx使用rewrite重新定向
  16. C#开发Unity游戏教程循环遍历做出判断及Unity游戏示例
  17. Java 内存模型及GC原理 (转载)
  18. [转]logging使用
  19. PHP学习方法总结
  20. HTTP相关知识点

热门文章

  1. django 搭建一个投票类网站(一)
  2. MySQL加号+ 的作用
  3. Windows下Go安装&环境配置&编译运行
  4. C#常见几种集合比较
  5. 微信环境中如何实现跳转到手机默认外部浏览器下载apk文件
  6. 解决安装VMware Player出错,提示安装程序无法继续,microsoft runtime dll安装程序未能完成安装
  7. 2.2 selenium:org.openqa.selenium.WebDriverException: f.QueryInterface is not a function
  8. Java 动态代理实现
  9. lees入门
  10. 吴裕雄 python 机器学习——KNN回归KNeighborsRegressor模型