移动端适配

最新推荐文章于 2025-09-10 19:44:49 发布

weixin_30781631

最新推荐文章于 2025-09-10 19:44:49 发布

阅读量47

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zhousen34/p/9438241.html

本文介绍了一种基于JavaScript的移动端页面适配方案，通过监听屏幕尺寸变化动态调整根元素字体大小，实现不同设备上的布局自适应。

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
<title>测试</title>
<script src="js/jquery.min.js"></script>
<script>
var fun = function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if(!clientWidth) return;

//这里是假设在640px宽度设计稿的情况下，1rem = 24px；
//可以根据实际需要修改
docEl.style.fontSize = 24 * (clientWidth / 750) + 'px';
};
if(!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
}
fun(document, window);
</script>
</head>

</html>

转载于:https://www.cnblogs.com/zhousen34/p/9438241.html