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

前端常見的兩種pc適配方案介紹

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

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

1.1、場景

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

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

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

1.2、意義

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

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

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

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

2、方案一 適配寬高

2.1、介紹：適配小于比例的寬或高，進行縮放 并移動位置使其在頁面中心點

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

<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è)置變換的原點為左上角
};

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、方案二 適配寬，高度滾動

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; // 基準(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è)置變換的原點為左上角
  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)化了用戶體驗，還提高了網(wǎng)站的整體效率和表現(xiàn)，是現(xiàn)代網(wǎng)頁開發(fā)中不可或缺的一部分。

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

相關(guān)文章

最新評論