前端常見(jiàn)的兩種pc適配方案介紹
1、自適應(yīng)介紹
1.1、場(chǎng)景
1：電商網(wǎng)站： 在PC端，自適應(yīng)設(shè)計(jì)能夠確保商品頁(yè)面在各種顯示器上清晰可讀，購(gòu)物車(chē)和結(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)站能夠適配更多類(lèi)型的設(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)文章
本文主要介紹防止重復(fù)發(fā)送 Ajax請(qǐng)求的方法。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
使用JavaScript實(shí)現(xiàn)隨機(jī)曲線之間進(jìn)行平滑切換
今天,我運(yùn)用拉格朗日插值法繪制了一條曲線,然而,我并未止步于靜態(tài)展示,而是引入了一個(gè)定時(shí)器,每隔一段時(shí)間便對(duì)曲線上的點(diǎn)進(jìn)行動(dòng)態(tài)更新,從而賦予曲線生命般的動(dòng)態(tài)變化,本文介紹了使用JavaScript實(shí)現(xiàn)隨機(jī)曲線之間進(jìn)行平滑切換,感興趣的朋友可以參考下2024-11-11
通過(guò)javascript的匿名函數(shù)來(lái)分析幾段簡(jiǎn)單有趣的代碼
想起自己很久以前學(xué)習(xí)javascript的經(jīng)歷，也曾經(jīng)碰到過(guò)幾個(gè)由匿名函數(shù)造成的困擾（其中一個(gè)就是由閉包引起的），下面就整理幾段簡(jiǎn)單代碼討論一下，讓我們大家一起進(jìn)步。2010-06-06
layui實(shí)現(xiàn)數(shù)據(jù)表格自定義數(shù)據(jù)項(xiàng)
今天小編就為大家分享一篇layui實(shí)現(xiàn)數(shù)據(jù)表格自定義數(shù)據(jù)項(xiàng)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡(jiǎn)單的秒表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-01-01
iframe實(shí)現(xiàn)高度自適應(yīng)小程序web-view方案
這篇文章主要為大家介紹了iframe實(shí)現(xiàn)高度自適應(yīng)小程序web-view方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
element-ui 時(shí)間選擇器限制范圍的實(shí)現(xiàn)（隨動(dòng)）
這篇文章主要介紹了element-ui 時(shí)間選擇器限制范圍（隨動(dòng)）,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01
檢查對(duì)象類(lèi)型的一種方式是參考所有JavaScript對(duì)象所共有的一個(gè)稱為constructor的屬性。該屬性是對(duì)一個(gè)最初用來(lái)構(gòu)造此對(duì)象的函數(shù)的引用。2010-10-10
js實(shí)現(xiàn)簡(jiǎn)單的手風(fēng)琴效果
本文主要介紹了js實(shí)現(xiàn)簡(jiǎn)單手風(fēng)琴效果的實(shí)例，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
JavaScript回調(diào)(callback)函數(shù)概念自我理解及示例
此文適合JavaScript入門(mén)級(jí)選手閱讀，在JavaScript里什么叫Callback“回調(diào)函數(shù)”，把方法b當(dāng)做一個(gè)參數(shù)傳遞個(gè)方法a，當(dāng)方法a執(zhí)行完后執(zhí)行另外一個(gè)指定函數(shù)（這里是b函數(shù)），感興趣的朋友可以了解下哈2013-07-07