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

更新时间：2024年10月24日 11:09:13 作者：无恃而安

这篇文章主要介绍了前端常见的两种pc适配方案的相关资料,在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适配方案内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

防止重复发送 Ajax 请求
本文主要介绍防止重复发送 Ajax请求的方法。具有很好的参考价值，下面跟着小编一起来看下吧
2017-02-02
使用JavaScript实现随机曲线之间进行平滑切换
今天,我运用拉格朗日插值法绘制了一条曲线,然而,我并未止步于静态展示,而是引入了一个定时器,每隔一段时间便对曲线上的点进行动态更新,从而赋予曲线生命般的动态变化,本文介绍了使用JavaScript实现随机曲线之间进行平滑切换,感兴趣的朋友可以参考下
2024-11-11
通过javascript的匿名函数来分析几段简单有趣的代码
想起自己很久以前学习javascript的经历，也曾经碰到过几个由匿名函数造成的困扰（其中一个就是由闭包引起的），下面就整理几段简单代码讨论一下，让我们大家一起进步。
2010-06-06
layui实现数据表格自定义数据项
今天小编就为大家分享一篇layui实现数据表格自定义数据项，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-10-10
js实现简单的秒表
这篇文章主要为大家详细介绍了js实现简单的秒表，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-01-01
iframe实现高度自适应小程序web-view方案
这篇文章主要为大家介绍了iframe实现高度自适应小程序web-view方案详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-01-01
element-ui 时间选择器限制范围的实现（随动）
这篇文章主要介绍了element-ui 时间选择器限制范围（随动）,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-01-01
js类型检查实现代码
检查对象类型的一种方式是参考所有JavaScript对象所共有的一个称为constructor的属性。该属性是对一个最初用来构造此对象的函数的引用。
2010-10-10
js实现简单的手风琴效果
本文主要介绍了js实现简单手风琴效果的实例，具有很好的参考价值，下面跟着小编一起来看下吧
2017-02-02
JavaScript回调(callback)函数概念自我理解及示例
此文适合JavaScript入门级选手阅读，在JavaScript里什么叫Callback“回调函数”，把方法b当做一个参数传递个方法a，当方法a执行完后执行另外一个指定函数（这里是b函数），感兴趣的朋友可以了解下哈
2013-07-07