前端大屏開發(fā)3種主流適配方案總結
更新時間：2025年03月07日 08:24:37 作者：zqwang888
這篇文章主要介紹了前端大屏開發(fā)3種主流適配方案的相關資料,分別是vwvh方案、scale方案和rem+vwvh方案,每種方案都有其優(yōu)缺點,可以根據具體需求選擇合適的方法,需要的朋友可以參考下
摘要
目前主流三種：
1.vw vh方案：
- 實現(xiàn)方式：按照設計稿的尺寸，將
px按比例計算轉為vw和vh - 優(yōu)點：1.可以動態(tài)計算圖表的寬高，字體等，靈活性較高 2.當屏幕比例跟 ui 稿不一致時，不會出現(xiàn)兩邊留白情況
- 缺點：每個圖表都需要單獨做字體、間距、位移的適配，比較麻煩
2.scale方案：
- 實現(xiàn)方式：通過
scale屬性，根據屏幕大小，對圖表進行整體的等比縮放 - 優(yōu)點：1.代碼量少，適配簡單 2.一次處理后不需要在各個圖表中再去單獨適配
- 缺點：1.因為是根據 ui 稿等比縮放，當大屏跟 ui 稿的比例不一樣時，會出現(xiàn)周邊留白情況 2.當縮放比例過大時候，字體會有一點點模糊，就一點點 3.當縮放比例過大時候，事件熱區(qū)會偏移。
3.rem + vw vh方案：
- 實現(xiàn)方式：1.獲得 rem 的基準值 2.動態(tài)的計算
html根元素的font-size3.圖表中通過 vw vh 動態(tài)計算字體、間距、位移等 - 優(yōu)點：布局的自適應代碼量少，適配簡單
- 缺點：1.因為是根據 ui 稿等比縮放，當大屏跟 ui 稿的比例不一樣時，會出現(xiàn)周邊留白情況 2.圖表需要單個做字體、間距、位移的適配
方案一、vw vh
說明：
1.當屏幕尺寸比例大于設計稿，頁面有被壓縮的感覺
2.當屏幕尺寸比例小于設計稿，頁面有被放大的感覺
按照設計稿的尺寸，將px按比例計算轉為vw和vh，轉換公式如下
假設設計稿尺寸為 1920*1080（做之前一定問清楚 ui 設計稿的尺寸） 即： 網頁寬度=1920px 網頁高度=1080px 網頁寬度=100vw 網頁寬度=100vh 所以，在 1920px*1080px 的屏幕分辨率下 1920px = 100vw 1080px = 100vh 這樣一來，以一個寬 300px 和 200px 的 div 來說，其所占的寬高，以 vw 和 vh 為單位，計算方式如下: vwDiv = (300px / 1920px) * 100vw vhDiv = (200px / 1080px) * 100vh 所以，就在 1920*1080 的屏幕分辨率下，計算出了單個 div 的寬高 當屏幕放大或者縮小時，div 還是以 vw 和 vh 作為寬高的，就會自動適應不同分辨率的屏幕
1. css 方案 - sass
util.scss
// 使用 scss 的 math 函數，https://sass-lang.com/documentation/breaking-changes/slash-div
@use "sass:math";
// 默認設計稿的寬度
$designWidth: 1920;
// 默認設計稿的高度
$designHeight: 1080;
// px 轉為 vw 的函數
@function vw($px) {
@return math.div($px, $designWidth) * 100vw;
}
// px 轉為 vh 的函數
@function vh($px) {
@return math.div($px, $designHeight) * 100vh;
}
只需在vue.config.js里配置一下utils.scss的路徑，就可以全局使用了
vue.config.js
const path = require("path");
function resolve(dir) {
return path.join(__dirname, dir);
}
module.exports = {
publicPath: "",
configureWebpack: {
name: "app name",
resolve: {
alias: {
"@": resolve("src"),
},
},
},
css: {
// 全局配置 utils.scs，詳細配置參考 vue-cli 官網
loaderOptions: {
sass: {
prependData: `@import "@/styles/utils.scss";`,
},
},
},
};
在 vue 中使用
<template>
<div class="box">
</div>
</template>
<script>
export default{
name: "Box",
}
</script>
<style lang="scss" scoped="scoped">
/*
直接使用 vw 和 vh 函數，將像素值傳進去，得到的就是具體的 vw vh 單位
*/
.box{
width: vw(300);
height: vh(100);
font-size: vh(16);
background-color: black;
margin-left: vw(10);
margin-top: vh(10);
border: vh(2) solid red;
}
</style>
2. 定義 js 樣式處理函數
// 定義設計稿的寬高
const designWidth = 1920
const designHeight = 1080
// px轉vw
export const px2vw = (_px) => {
return (_px * 100) / designWidth + 'vw'
}
export const px2vh = (_px) => { return (_px * 100.0) / designHeight + 'vh'; };
export const px2font = (_px) => { return (_px * 100.0) / designWidth + 'vw'; };
屏幕變化后，圖表自動調整
封裝自定義指令
// directive.js
import * as ECharts from "echarts";
import elementResizeDetectorMaker from "element-resize-detector";
import Vue from "vue";
const HANDLER = "_vue_resize_handler";
function bind(el, binding) {
el[HANDLER] = binding.value
? binding.value
: () => {
let chart = ECharts.getInstanceByDom(el);
if (!chart) {
return;
}
chart.resize();
};
// 監(jiān)聽綁定的div大小變化，更新 echarts 大小
elementResizeDetectorMaker().listenTo(el, el[HANDLER]);
}
function unbind(el) {
// window.removeEventListener("resize", el[HANDLER]);
elementResizeDetectorMaker().removeListener(el, el[HANDLER]);
delete el[HANDLER];
}
// 自定義指令：v-chart-resize 示例：v-chart-resize="fn"
Vue.directive("chart-resize", { bind, unbind });
圖表之間的文字、間距、位移等尺寸自適應
- 其原理是計算出當前屏幕寬度和默認設計寬度的比值，將原始的尺寸乘以該值，寫個工具函數
方案二：scale
通過 css 的 scale 屬性，根據屏幕大小，對圖表進行整體的等比縮放，從而達到自適應效果
1.當屏幕尺寸比例大于設計稿，頁面左右留白，上下占滿并居中，顯示比例保持 16:9
2.當屏幕尺寸比例小于設計稿，頁面上下留白，左右占滿并上下居中，顯示比例保持 16:9
html 部分
<div className="screen-wrapper">
<div className="screen" id="screen">
</div>
</div>js 部分
<script>
export default {
mounted() {
// 初始化自適應 --在剛顯示時候開始適配一次
handleScreenAuto();
// 綁定自適應函數 ---防止瀏覽器欄變化后不再適配
window.onresize = () => handleScreenAuto();
},
destroyed() {
window.onresize = null;
},
methods: {
handleScreenAuto() {
const designDraftWidth = 1920; //設計稿的寬度
const designDraftHeight = 960; //設計稿的高度
// 根據屏幕的變化適配的比例
const scale = document.documentElement.clientWidth / document.documentElement.clientHeight < designDraftWidth / designDraftWidth ?
document.documentElement.clientWidth / designDraftWidth :
document.documentElement.clientHeight / designDraftHeight;
// 縮放比例
document.querySelector('#screen').style.transform = `scale(${scale}) translate(-50%, -50%)`;
}
}
}
</script>CSS部分
/*
除了設計稿的寬高是根據您自己的設計稿決定以外，其他復制粘貼就完事
*/
.screen-root {
height: 100%;
width: 100%;
.screen {
display: inline-block;
width: 1920px; //設計稿的寬度
height: 960px; //設計稿的高度
transform-origin: 0 0;
position: absolute;
left: 50%;
top: 50%;
}
}
方案三：rem + vw wh
1.當屏幕尺寸比例大于設計稿，頁面左右留白，上下占滿并居中，顯示比例保持 16:9
2.當屏幕尺寸比例小于設計稿，頁面上下留白，左右占滿并上下居中，顯示比例保持 16:9
關于 rem
rem(font size of the root element)，是 css3 中新增的一個大小單位，即相對于根元素 font-size 值的大小。
自適應思路動態(tài)的計算出頁面的 fontsize 從而改變 rem 的大小。
- 將屏幕分為10份，以1920 * 1080為例子，先計算rem的基準值：1920/10 = 192
- 把所有元素的長，寬，位置，字體大小等原來的px轉成rem
- 網頁加載后，用js計算當前瀏覽器的寬度，并設置html的font-size為(當前窗口寬度 / 10) ，這樣的話 10rem 就剛好等于瀏覽器窗口的寬度，也就可以保證 100% 寬度，等比例縮放設計稿的頁面了。
rem + vw vh 方案要解決三件事
- 獲取rem的基準值
- 頁面內寫一段js，動態(tài)計算html根元素的font-size
- 屏幕變化后，圖表自動調整和圖表字體、間距、位移等的自適應
1、獲得 rem 的基準值
- 首先安裝
postcss-px-to-rem這個包 - 在項目根目錄新建
.postcssrc.js配置文件
module.exports = {
plugins: {
autoprefixer: {},
"postcss-px-to-rem": {
unitToConvert: 'px', // (String) 要轉換的單位，默認是 px。
widthOfDesignLayout: 1920, // (Number) 設計布局的寬度。對于pc儀表盤，一般是 1920.
unitPrecision: 3, // (Number) 允許 rem 單位增長到的十進制數字.
selectorBlackList: ['.ignore', '.hairlines'], // (Array) 要忽略并保留為 px 的選擇器.
minPixelValue: 1, // (Number) 設置要替換的最小像素值.
mediaQuery: false // (Boolean) 允許在媒體查詢中轉換 px.
}
}
}配置完成后，頁面內的 px 就會被轉換成 rem 了
2、動態(tài)的計算html根元素的font-size
在工具函數文件中新建一個 rem.js 文件，用于動態(tài)計算 font-size
(function init(screenRatioByDesign = 16 / 9) {
let docEle = document.documentElement
function setHtmlFonstSize() {
var screenRatio = docEle.clientWidth / docEle.clientHeight;
var fontSize = (
screenRatio > screenRatioByDesign ? (screenRatioByDesign / screenRatio) : 1
) * docEle.clientWidth / 10;
docEle.style.fontSize = fontSize.toFixed(3) + "px";
console.log(docEle.style.fonSize);
}
setHtmlFontSize()
window.addEventListener('resize', setHtmlFontSize)
})
在入口文件 main.js 中引入 rem.js 文件
import './utils/rem.js';
3、屏幕變化，圖表自適應
屏幕變化后，圖表自動調整字體、間距、位移等，此處參考上面 vw vh 的實現(xiàn)方式即可
總結
到此這篇關于前端大屏開發(fā)3種主流適配方案總結的文章就介紹到這了,更多相關前端大屏適配方案內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關文章
這篇文章主要介紹了three.js 制作動態(tài)二維碼的示例代碼，文中講解非常細致，幫助大家更好的理解和學習，感興趣的朋友可以了解下2020-07-07
在做調查問卷的過程中，遇到一個表格的統(tǒng)計問題，一個需要用到js方面的綜合知識，感覺還不錯所以記錄下來與大家分享，感興趣的朋友可以了解下2013-09-09
這篇文章主要介紹了js中構造流程圖的核心技術JsPlumb，jsPlumb是一個強大的JavaScript連線庫，它可以將html中的元素用箭頭、曲線、直線等連接起來，適用于開發(fā)Web上的圖表、建模工具等，需要的朋友可以參考下2015-12-12
微信小程序 scroll-view 水平滾動實現(xiàn)過程解析
這篇文章主要介紹了微信小程序 scroll-view 水平滾動實現(xiàn)過程解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-10-10
本文主要介紹了svg實現(xiàn)的動態(tài)描邊效果，文中分享了兩個實例：1.一個簡單的線一點一點畫出來的效果；2.用同樣的原理畫一個“藍胖子”。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
js實現(xiàn)base64、url和blob之間相互轉換的三種方式
Blob對象表示一個不可變、原始數據的類文件對象,Blob表示的不一定是JavaScript原生格式的數據,下面這篇文章主要給大家介紹了關于js實現(xiàn)base64、url和blob之間相互轉換的三種方式,需要的朋友可以參考下2023-04-04
這篇文章主要為大家詳細介紹了js密碼強度實時檢測代碼，密碼強度的判斷, 在注冊網站用戶的時候, 是一個必須要做的事情，如何實現(xiàn)js密碼強度檢測，感興趣的小伙伴們可以參考一下2016-03-03
驗證郵箱格式是否正確的方法有很多，接下來為大家介紹下使用js是如何做到的2013-12-12
JS+canvas五子棋人機對戰(zhàn)實現(xiàn)步驟詳解
這篇文章主要介紹了JS+canvas五子棋人機對戰(zhàn)實現(xiàn)步驟詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-06-06
這篇文章主要為大家詳細介紹了微信小程序自定義select下拉選項框的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05