前端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端自适应与适配技术不仅优化了用户体验，还提升了网站的整体效率与表现，已成为现代网页开发中不可或缺的关键环节。

本文关于前端常见PC适配方案的介绍到此结束，更多相关前端PC适配方案内容请搜索本站历史文章或继续浏览下方相关文章，希望大家以后多多支持本站！

前端PC端自适应开发：两种常见适配方案解析