移动端适配问题解决方案

最新推荐文章于 2024-07-19 22:55:18 发布

KIKIo_

最新推荐文章于 2024-07-19 22:55:18 发布

阅读量1.2k

点赞数 1

分类专栏：前端文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/weixin_46738453/article/details/126440295

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章目录

一、移动端适配

一、移动端适配

1、什么是移动端适配

在这里插入图片描述

2、认识视口

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uhJJaBW9-1660980062577)(318D047924CE4AFE8BAFAA02A3CD7606)]

在这里插入图片描述

<!-- width: 设置布局视口的宽度 -->
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

3、移动端适配方案

在这里插入图片描述

3.1 媒体查询

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    @media screen and (min-width: 320px) {
      html {
        font-size: 20px;
      }
    }

    @media screen and (min-width:375px) {
      html {
        font-size: 30px;
      }
    }

    @media screen and (min-width:400px) {
      html {
        font-size: 40px;
      }
    }

    @media screen and(min-width:500px) {
      html {
        font-size: 50px;
      }
    }

    .box {
      width: 5rem;
      height: 5rem;
      background-color: orange;
    }
  </style>
</head>

<body>

  <div class="box">

  </div>

</body>

</html>

3.2 js动态计算

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bIGclLY1-1660980062584)(270021E8F05B47BDAB75445E7FCA3DB2)]

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>


  <style>
    /* 设置font-size之后页面不会随便继承html的大小 */
    body {
      font-style: 16px;
    }

    .box {
      width: 5rem;
      height: 5rem;
      background-color: orange;
    }

    p {
      font-style: 0.5rem;
    }
  </style>
</head>

<body>
  <div class="box"></div>
  <p>我是文本</p>
  <span>哈哈哈</span>


  <script>
    // 1.获取html的元素
    const htmlEl = document.documentElement

    function setRemUnit() {
      // 2.获取html的窗口宽度
      const htmlWidth = htmlEl.clientWidth
      // 3.根据宽度计算一个html的font-size的大小
      const htmlFontSize = htmlWidth / 10
      // 4.将font-size甚至到html
      htmlEl.style.fontSize = htmlFontSize + 'px'
    }
    // 保证第一次进来的时候,触发一次
    setRemUnit()

    // 当屏幕尺寸发生变化的时候,实时修改html的font-size
    window.addEventListener('resize', setRemUnit)

    // 当页面发生跳转的时候触发,前进后退按钮
    window.addEventListener('pageshow', function (e) {
      if (e.persisted) {
        setRemUnit()
      }
    })
  </script>

</body>

</html>

3.3 使用库

在这里插入图片描述

4、rem计算的方法

4.1 手动计算

  <style>
    /* 假设设计稿为750px  将他视为10份 每一份为37.5  */
    /* 即1rem = 37.5px  100px = 100/37.5rem */
    .box {
      width: 2.66667rem;
      height: 2.66667rem;
      background-color: orange;
    }

    p {
      font-size: 0.373333rem;
    }
  </style>

4.2 通过less计算

使用lessc插件使得可以使用less编译器 lessc.org

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <link rel="stylesheet/less" href="./rem_less/index.less">

  <script src="./js/hy_flexible.js"></script>
  <script src="./js/lessc.js"></script>
</head>

<body>

  <div class="box">
  </div>

  <p>我是文本</p>

</body>

</html>

.pxToRem(@px) {
  result: 1rem * (@px/37.5)
}

.box {
  width: .pxToRem(100)[result];
  height: .pxToRem(100)[result];
  background-color: orange;
}

p {
  font-size: .pxToRem(14)[result];
}