目录

1.用百分比

2.用rem 、resize

3.媒体查询语句

4.flex布局

---

1.用百分比

<template>
  <div class="box">
    <div class="inner-box">
    </div>
  </div>
</template>
<style lang='scss' scope>
  .box {
    width: 100vw;
    height: 100vh;
    .inner-box {
      width: 20%;
      height: 20%;
      background: cadetblue;
    }
  }
</style>

2.用rem 、resize

rem 的原理是根据父容易的fontsize 来计算rem的单位长度。可以通过监听window 的resize ，动态修改fontsize、进而影响rem、最终打到自适应的效果

// resize.js
const scaleListener = () => {
  window.addEventListener('resize', resize)
  console.log('scaleListening......')
}
const resize = () => {
  // 与原来 1080 的比值
  let scale = window.innerHeight / 1080
  document.documentElement.style.fontSize = `${16 * scale}px` 
  console.log('resize')
}
export {
  scaleListener
}

// APP.vue
<script>
import { scaleListener } from '../src/components/resize/resize';
export default {
  mounted() {
    scaleListener()
  },
}
</script>

3.媒体查询语句

@media screen and (max-width: 300px) {

html {

width: 300px;

font-size: 12px;

}

}

@media screen and (min-width: 500px) {

html {

width: 500px;

font-size: 20px;

margin: 0 auto; /* 让窗口水平居中展示 */

}

}

4.flex布局

是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <h2>欢迎光临红浪漫洗浴中心</h2>
    <div>请选择一个美女为你服务</div>
    <button
      v-for="(item, index) in girls"
      v-bind:key="index"
      @click="selectGirlFun(index)"
    >
      {{ index }}:{{ item }}
    </button>
    <div>您选择了【{{ selectGirl }}】美女为您服务</div>
    <div class="flex-test">
      <div class="div1">1.</div>
      <div class="div2">2.</div>
      <div class="div3">3.</div>
      <div class="div4">4.</div>
    </div>
  </div>
</template>

<script lang="ts">
import {
  ref,
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onRenderTracked,
} from "vue";
interface DataProps {
  girls: string[];
  selectGirl: string;
  selectGirlFun: (index: number) => void;
}
export default {
  name: "App",
  //创建之前
  setup() {
    console.log("1-开始创建组件-----开始执行setUp");
    const data: DataProps = reactive({
      girls: ["大脚", "刘英", "晓红", "王蒙"],
      selectGirl: "",
      selectGirlFun: (index: number) => {
        data.selectGirl = data.girls[index];
      },
    });
    //生命周期
    //钩子函数
    //beforCreate created/setup运行在berorCreate 和create 之前   组件创建之前
    //onBeforeUMount() //组件卸载之前执行的行数。vue2 中onUnmOuntted
    //onactivated()<keep -alive</keep-alive>
    //onDeactivated()
    //onErrorCapatured()捕获子组件异常
    //响应式状态跟踪组件
    onRenderTracked((event) => {
      console.log("状态跟踪钩子函数----------");
      console.log(event);
    });
    //可以使用vue2的狗子函数钩子函数
    const refDAta = toRefs(data);
    return {
      //...扩展运算符
      ...refDAta,
    };
  },
};
//ref ()\reactive() 两个函数都是将普通的data数据变成了响应性的数据。
//生命周期
//钩子函数
//onRenderTracked 状态跟踪   onRenderTriggered
//在实际开发中用了vue3，就避免使用vue2 ，虽然还保留着vue2的生命周期只是为了过渡
</script>
<style  lang="scss"   scoped>
.flex-test {
  display: flex;
  flex-direction: row;
  .div1 {
    width: 20%;
    background-color: cadetblue;
  }
  .div2 {
    width: 20%;
    background-color: darkgray;
  }
  .div3 {
    width: 20%;
    background-color: darkolivegreen;
  }
  .div4 {
    width: 20%;
    background-color: green;
  }
}
</style>