html移动端展示文字自适应

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
  <title>提示信息</title>
  <style type="text/css">
    #tip {
      color: #8492A6;
      font-size: 2rem;
      font-weight: 700;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
      word-break: break-all;
      width: 80%;
      text-align: center;
    }
  </style>
</head>
<body>
<div id="tip"></div>
<script>
  var docEl = document.documentElement;
  // 判断当前手机移动端屏幕是否翻转 如果翻转为true 赋值 "orientationchange"
  var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
  var recalc = () => {
    var clientWidth = docEl.clientWidth;
    if (!clientWidth) return;
    //如果屏幕大于750(750是根据效果图设置的,具体数值参考效果图),clientWidth=750,防止font-size会超过100px
    if (clientWidth > 750) clientWidth = 750;
    //设置根元素font-size大小
    docEl.style.fontSize = clientWidth / 750 * 16 + 'px';
  };
  //屏幕大小改变,或者横竖屏切换时,触发函数
  window.addEventListener(resizeEvt, recalc, false);
  //文档加载完成时,触发函数
  document.addEventListener('DOMContentLoaded', recalc, false);

  // 设置错误信息
  var dom = document.getElementById('tip');
  var errorReg = new RegExp("[\?\&]" + 'tip' + "=([^\&]+)", "i");
  var r = window.location.search.match(errorReg);
  dom.innerHTML = decodeURI((r || [])[1]) + "<br>";
</script>
</body>
</html>

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值