js 实现在移动端开发，解决不同手机像素大小的兼容问题
2017-05-28 16:46
645 查看
Js 实现在移动开发网页时，根据手机像素不同，自动改变相对，字体的大小。 实例代码中以750像素为参考，如果在350像素手机上显示该内容，相对字体大小为1px=0.01rem
(function (doc, win) {
var docEle = doc.documentElement,
resizeEvent = 'orientationchange' in window ? 'orientationchange' : 'resize';
var recalCulate = function () {
var width = docEle.clientWidth;
docEle.style.fontSize = 100 * (width / 750) + 'px';
};
recalCulate();
if (!doc.addEventListener) return;
win.addEventListener(resizeEvent, recalCulate, false);
})(document, window);
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- android开发如何更好的解决适配不同屏幕大小移动设备的问题
- IOS-48-解决开发中自定义控件在不同型号手机上不能显示的问题 (区别在于iOS修改了weak、strong属性)
- 解决Js解析xml浏览器不兼容问题及省市区三级联动实现
- qt android开发篇之如何实现在不同分辨率手机中自适应字体大小，或者像素什么的
- js实现表格中不同单元格内容的替换（不同浏览器的节点属性兼容问题）
- swipe.js工具包实现手机web滑动轮播效果存在jQuery对象不能使用问题并解决（个人项目经验）
- 复制到剪贴板的JS实现--ZeroClipboard （兼解决IE下兼容问题）
- Linux应用随笔（五）64位Debian8兼容运行32位adb开发android应用，并解决手机驱动问题
- 解决移动端字体大小与设定大小不同的问题
- 解决Js解析xml浏览器不兼容问题及省市区三级联动实现
- 关于如何用rem兼容不同手机屏幕大小不一致问题以达到多终端自适应问题
- 移动端限制两位小数并且弹出数字键盘(解决使用H5S使用input[type='number']不兼容JS的问题)
- 解决不同js特效在不同浏览器之间的兼容问题
- 解决Js解析xml浏览器不兼容问题及省市区三级联动实现
- 随机字符串解决大问题之腾讯网如何实现手机扫描二维码登录qq功能的
- 解决Camera.parameter.setPreviewSize/Camera.parameter.setPictureSize适应不同手机问题
- 有关css和js针对不同浏览器兼容的问题
- 【Win10 应用开发】解决VS 2015 RC不能调试手机应用的问题
- 开发中常遇电磁兼容EMC问题及解决办法
- 移动端开发常见问题解决方案汇总- Javascript技巧（一）