欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

前端常見(jiàn)的兩種pc適配方案介紹

 更新時(shí)間：2024年10月24日 11:09:13   作者：無(wú)恃而安  
這篇文章主要介紹了前端常見(jiàn)的兩種pc適配方案的相關(guān)資料,在PC端自適應(yīng)設(shè)計(jì)通過(guò)優(yōu)化用戶體驗(yàn)和提高網(wǎng)站適配性,確保了電商網(wǎng)站、企業(yè)官網(wǎng)和在線教育平臺(tái)等多種場(chǎng)景下內(nèi)容的清晰展示和流暢操作,需要的朋友可以參考下

1、自適應(yīng)介紹

1.1、場(chǎng)景

1：電商網(wǎng)站： 在PC端，自適應(yīng)設(shè)計(jì)能夠確保商品頁(yè)面在各種顯示器上清晰可讀，購(gòu)物車和結(jié)算流程也能順暢進(jìn)行。用戶能夠方便地瀏覽商品、查看圖片和提交訂單，無(wú)論是在高分辨率的大屏顯示器還是較小的電腦屏幕上。

2：企業(yè)官網(wǎng)： 企業(yè)網(wǎng)站通常需要展示豐富的信息和圖表，包括公司介紹、服務(wù)內(nèi)容和聯(lián)系方式。自適應(yīng)設(shè)計(jì)能夠確保這些內(nèi)容在不同的PC屏幕上都能以最優(yōu)方式呈現(xiàn)，使?jié)撛诳蛻艉秃献骰锇槟軌蚩焖佾@取信息。

3：在線教育平臺(tái)： 教育平臺(tái)上的課程內(nèi)容、視頻和互動(dòng)模塊需要在各種屏幕上都能正常顯示。自適應(yīng)設(shè)計(jì)使得學(xué)習(xí)者能夠在不同設(shè)備上享受一致的學(xué)習(xí)體驗(yàn)，提高了學(xué)習(xí)的便利性和效果。

1.2、意義

1：提升用戶體驗(yàn)： 通過(guò)自適應(yīng)設(shè)計(jì)，用戶在不同的設(shè)備和屏幕尺寸下都能享受到優(yōu)化的瀏覽體驗(yàn)，減少了頁(yè)面縮放和滾動(dòng)的需要，提高了網(wǎng)站的可用性。

2：增加網(wǎng)站訪問(wèn)量： 自適應(yīng)設(shè)計(jì)使網(wǎng)站能夠適配更多類型的設(shè)備和屏幕，增加了訪問(wèn)的靈活性。這有助于吸引和留住更多用戶，提高網(wǎng)站的整體流量。

3：提高開(kāi)發(fā)效率： 采用自適應(yīng)設(shè)計(jì)可以減少為不同設(shè)備開(kāi)發(fā)和維護(hù)多個(gè)版本網(wǎng)站的需要，從而節(jié)省開(kāi)發(fā)和維護(hù)的時(shí)間和成本。

4：增強(qiáng)SEO表現(xiàn)： 搜索引擎通常更傾向于推薦適配性強(qiáng)的網(wǎng)站。良好的自適應(yīng)設(shè)計(jì)能夠提高網(wǎng)站的搜索引擎排名，從而增加曝光率和訪問(wèn)量。

2、方案一 適配寬高

2.1、介紹：適配小于比例的寬或高，進(jìn)行縮放 并移動(dòng)位置使其在頁(yè)面中心點(diǎn)

2.2、缺點(diǎn)：兩側(cè)或上下可能會(huì)留白 字體變小

<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'; // 設(shè)置變換的原點(diǎn)為左上角
};

onMounted(() => {
  window.addEventListener('resize', resize);
  resize(); // 初始調(diào)用
});

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 中的設(shè)置保持一致
}
</style>

3、方案二 適配寬，高度滾動(dòng)

3.1介紹：只適配頁(yè)面寬度 高度跟隨比例進(jìn)行滾動(dòng)

3.2、缺點(diǎn)：增加了滾動(dòng)條

<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; // 基準(zhǔn)寬度為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'; // 設(shè)置變換的原點(diǎn)為左上角
  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(); // 初始調(diào)用
});

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 中的設(shè)置保持一致
}
</style>

總結(jié)

總之，PC端自適應(yīng)和適配技術(shù)不僅優(yōu)化了用戶體驗(yàn)，還提高了網(wǎng)站的整體效率和表現(xiàn)，是現(xiàn)代網(wǎng)頁(yè)開(kāi)發(fā)中不可或缺的一部分。

到此這篇關(guān)于前端常見(jiàn)的兩種pc適配方案的文章就介紹到這了,更多相關(guān)前端pc適配方案內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論