前端 介绍常见两种pc适配方案

---

团队博客：无恃而安

---

1、自适应介绍

1.1、场景

1：电商网站： 在PC端，自适应设计能够确保商品页面在各种显示器上清晰可读，购物车和结算流程也能顺畅进行。用户能够方便地浏览商品、查看图片和提交订单，无论是在高分辨率的大屏显示器还是较小的电脑屏幕上。

2：企业官网： 企业网站通常需要展示丰富的信息和图表，包括公司介绍、服务内容和联系方式。自适应设计能够确保这些内容在不同的PC屏幕上都能以最优方式呈现，使潜在客户和合作伙伴能够快速获取信息。

3：在线教育平台： 教育平台上的课程内容、视频和互动模块需要在各种屏幕上都能正常显示。自适应设计使得学习者能够在不同设备上享受一致的学习体验，提高了学习的便利性和效果。

1.2、意义

1：提升用户体验： 通过自适应设计，用户在不同的设备和屏幕尺寸下都能享受到优化的浏览体验，减少了页面缩放和滚动的需要，提高了网站的可用性。

2：增加网站访问量： 自适应设计使网站能够适配更多类型的设备和屏幕，增加了访问的灵活性。这有助于吸引和留住更多用户，提高网站的整体流量。

3：提高开发效率： 采用自适应设计可以减少为不同设备开发和维护多个版本网站的需要，从而节省开发和维护的时间和成本。

4：增强SEO表现： 搜索引擎通常更倾向于推荐适配性强的网站。良好的自适应设计能够提高网站的搜索引擎排名，从而增加曝光率和访问量。

2、方案一 适配宽高

2.1、介绍：适配小于比例的宽或高，进行缩放 并移动位置使其在页面中心点

2.2、缺点：两侧或上下可能会留白 字体变小

<template>
  <div ref="appRef" class="appRef">
    <router-view />
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';

const scale = {
  width: '1',
  height: '1'
};

const baseWidth = 1920;
const baseHeight = 1080;
const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5));

const appRef = ref(null);
const drawTiming = ref(null);

const resize = function () {
  clearTimeout(drawTiming.value);
  drawTiming.value = setTimeout(() => {
    calcRate();
  }, 200);
};

const calcRate = function () {
  if (!appRef.value) return;
  const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5));
  if (currentRate > baseProportion) {
    // 更宽
    scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5);
    scale.height = (window.innerHeight / baseHeight).toFixed(5);
  } else {
    // 更高
    scale.height = (window.innerWidth / baseProportion / baseHeight).toFixed(5);
    scale.width = (window.innerWidth / baseWidth).toFixed(5);
  }
  appRef.value.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`;
  appRef.value.style.transformOrigin = 'top left'; // 设置变换的原点为左上角
};

onMounted(() => {
  window.addEventListener('resize', resize);
  resize(); // 初始调用
});

onBeforeUnmount(() => {
  window.removeEventListener('resize', resize);
});
</script>

<style lang="scss" scoped>
.appRef {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1920px;
  height: 1080px;
  transform-origin: top left; // 与 JavaScript 中的设置保持一致
}
</style>

3、方案二 适配宽，高度滚动

3.1介绍：只适配页面宽度 高度跟随比例进行滚动

3.2、缺点：增加了滚动条

<template>
  <div ref="appRef" class="appRef">
    <router-view />
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';

const scale = {
  width: '1',
  height: '1'
};

const baseWidth = 1920;
const baseHeight = 1080;
const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5));

const appRef = ref(null);
const drawTiming = ref(null);

const resize = function () {
  clearTimeout(drawTiming.value);
  drawTiming.value = setTimeout(() => {
    calcRate();
  }, 200);
};

const calcRate = function () {
  if (!appRef.value) return;
  const widthScale = window.innerWidth / 1920; // 基准宽度为1920px
  const offsetX = ((window.innerHeight / widthScale) - window.innerHeight) / 2;
  appRef.value.style.height = `${window.innerHeight / widthScale}px`;
  appRef.value.style.transform = `scale(${widthScale})`;
  appRef.value.style.transformOrigin = 'left center'; // 设置变换的原点为左上角
  appRef.value.style.position = 'absolute';
  appRef.value.style.left = `0px`;
  appRef.value.style.top = `${-offsetX}px`;
  appRef.value.style.width = `1920px`;
};

onMounted(() => {
  window.addEventListener('resize', resize);
  resize(); // 初始调用
});

onBeforeUnmount(() => {
  window.removeEventListener('resize', resize);
});
</script>

<style lang="scss" scoped>
.appRef {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1920px;
  height: 1080px;
  transform-origin: top left; // 与 JavaScript 中的设置保持一致
}
</style>

总结

总之，PC端自适应和适配技术不仅优化了用户体验，还提高了网站的整体效率和表现，是现代网页开发中不可或缺的一部分。