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

您可能感兴趣的文章:

JavaScript实现更改网页背景与字体颜色的方法
这篇文章主要介绍了JavaScript实现更改网页背景与字体颜色的方法,可实现点击按钮改变网页背景色的功能,具有一定参考借鉴价值,需要的朋友可以参考下
2015-02-02
微信小程序HTTP接口请求封装代码实例
这篇文章主要介绍了微信小程序HTTP接口请求封装代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-09-09
js正则test匹配的踩坑及解决
这篇文章主要为大家介绍了正则test匹配的踩坑示例讲解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
深度解析JavaScript中的filter()方法
在JavaScript中,filter()是一个数组方法,用于从数组中过滤出符合特定条件的元素,并返回一个新数组,本文将带大家深度解析JavaScript中的filter()方法,需要的朋友可以参考下
2023-09-09
JavaScript实现留言板实战案例
这篇文章主要给大家介绍了关于JavaScript实现留言板的相关资料,使用JavaScript来编写留言板功能相信大家都不陌生,文中给出了详细的示例代码,需要的朋友可以参考下
2023-07-07
微信小程序实现打卡签到页面
这篇文章主要为大家详细介绍了微信小程序实现打卡签到页面，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-09-09
js获取元素在浏览器中的绝对位置
其原理就是利用HTMLElement.offsetParent属性，需要的朋友可以参考下。
2010-07-07
用Javascript实现锚点(Anchor)间平滑跳转
本文介绍的方法，实现了锚点(Anchor)间平滑跳转，效果非常不错。
2009-09-09
妙用缓存调用链实现JS方法的重载
方法重载是指在一个类中定义多个同名的方法，但要求每个方法具有不同的参数的类型或参数的个数。简而言之就是：方法重载就是方法名称重复，加载参数不同
2018-04-04
半角全角相互转换的js函数
全角空格为12288，半角空格为32 其他字符半角(33-126)与全角(65281-65374)的对应关系是：均相差65248 .
2009-10-10