【经验心得】弹性布局rem-----模板----640设计稿

最新推荐文章于 2022-05-11 17:03:49 发布

weixin_33691700

最新推荐文章于 2022-05-11 17:03:49 发布

阅读量237

点赞数

原文链接：http://www.cnblogs.com/zhp404/articles/4283102.html

版权

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<style>
   *{margin:0;padding:0;}
   html{font-size:625%;}
   body{max-width:640px;margin:0 auto;font-size:14px;}
</style>
</head>

<body>
<div>...</div>
<div>...</div>

<script>
new function (){
    var _self = this ;
    _self.width = 640; // 设置默认最大宽度
    _self.fontSize = 100; // 默认字体大小
    _self.widthProportion = function (){ var p = (document.body&&document.body.clientWidth||document.getElementsByTagName("html")[0].offsetWidth)/_self.width;return p>1?1:p<0.5?0.5:p;};
    _self.changePage = function (){
    document.getElementsByTagName("html")[0].setAttribute("style","font-size:"+_self.widthProportion()*_self.fontSize+"px !important");
    }
    _self.changePage();
    window.addEventListener('resize', function (){_self.changePage();}, false );
};
</script>
</body>
</html>

转载于:https://www.cnblogs.com/zhp404/articles/4283102.html

weixin_33691700

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【经验心得】弹性布局rem-----模板----640设计稿

<!doctype html><html><head><meta charset="UTF-8"> <title></title><meta name="description" content=""><meta name="keywords" content=""><meta name="vie...
复制链接

扫一扫