移动WEB:JS控制 {body} 字体大小控制【常用】

方法一:px-rem自适应转换

<script>
function Rem() {
   var docEl = document.documentElement,
   oSize = docEl.clientWidth / 6.4;
   if (oSize > 100) {
   oSize = 100; // 限制rem值 640 / 6.4 =100
}
   docEl.style.fontSize = oSize + 'px';
}
window.addEventListener('resize', Rem, false);
Rem();
</script>

A: oSize = docEl.clientWidth/7.5; //设计稿默认750px宽度,这样7.5,如果设计稿是640px宽度,这个7.5就修改6.4

B: if(oSize>85){
oSize = 85; // 限制rem值 640 / 7.5 ≈ 85
}
640是max-width:640px这样的屏幕宽度,7.5是设计搞是750px
如果设计稿是 640px.则 640/6.4这样去
一把移动端页面 在 body处 设置 max-width:640px

如上加入这段代码,下面写单位的时候,直接按照PSD里面的标准大小除以100即可。
如:标注28px.则写 0.28rem即可!
自适应,体验性!beautiful!在各个终端完全自适应大小!伸缩自如!

方法二

fnResize();
var evt = "onorientationchange" in window ? "orientationchange": "resize";
window.addEventListener("resize",
function() {
    fnResize()
},
!1);
function fnResize() {
    var a = document.documentElement.clientWidth,
    b = document.getElementsByTagName("html")[0];
    750 <= a && (a = 750);
    b.style.fontSize = a / 20 + "px"
};
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值