移动端适配问题解决方案

文章目录

  • 一、移动端适配
    • 1、什么是移动端适配
    • 2、认识视口
    • 3、移动端适配方案
      • 3.1 媒体查询
      • 3.2 js动态计算
      • 3.3 使用库
    • 4、rem计算的方法
      • 4.1 手动计算
      • 4.2 通过less计算
      • 4.3 postcss-pxtorem
      • 4.4 利用vscode插件
    • 5、vh、vw单位换算

一、移动端适配

1、什么是移动端适配

移动端适配问题解决方案_第1张图片

2、认识视口

移动端适配问题解决方案_第2张图片

移动端适配问题解决方案_第3张图片

移动端适配问题解决方案_第4张图片


  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

3、移动端适配方案

移动端适配问题解决方案_第5张图片

3.1 媒体查询

移动端适配问题解决方案_第6张图片

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>Documenttitle>
  <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动态计算

移动端适配问题解决方案_第7张图片

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>Documenttitle>


  <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>Documenttitle>

  <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];
}

4.3 postcss-pxtorem

在这里插入图片描述

http://www.3qphp.com/web/javascript/4854.html

4.4 利用vscode插件

移动端适配问题解决方案_第8张图片

5、vh、vw单位换算

移动端适配问题解决方案_第9张图片

移动端适配问题解决方案_第10张图片

你可能感兴趣的:(前端,javascript,前端,css)