vue3 實現web網頁不同分辨率適配

vue3 實現web網頁不同分辨率適配

首先這個標題可能不是特別的合適,之前開發了一個網站,那個網站是類似于官網的效果,按照 19201080100% 的分辨率進行開發的,但是在開發完成之后,發現有的電腦是 19201080125% 的大小展示的,這樣的話,有些地方可能展示就會出一些問題。當然了可以用第三方的一些插件進行處理,也可以自己想辦法處理一下,這篇博文就是靠自己處理,簡單寫一下思路。

內容

首先,最顯而易見的操作就是開發的過程中盡可能用彈性盒子布局,組建頁面的時候盡可能使用百分比布局。其次,在設置文本大小、間距這類的數據時候,需要使用 rem 進行設置,而不是 px

在這里插入圖片描述

這里推薦一個 vscode 編輯器好用的 rem 轉換工具,叫 “px to rem & rpx & vw (cssrem)”。

在這里插入圖片描述

這個插件還是可以的!

然后呢,做完了這些的話,就簡單了,我們在加載完頁面的時候,先判斷一下,這個瀏覽器的寬度是不是 1920 的,因為我們是按照寬度是 1920 的分辨率開發適配的,如果不是的話,我們需要根據當前的寬度,結合我們設計的比例,重新算一下,當前需要給html設置的 font-size 大小是多少(默認是16px)。然后就可以啦!‘

// APP.vue
onMounted(() => {let docEl = document.documentElement;let clientWidth = docEl.clientWidth;docEl.style.fontSize = 16 * (clientWidth / 1920) + 'px';
});

這樣在我們打開頁面的時候他會計算當前頁面寬度與設計圖寬度1920的比例,然后重新設置html標簽的font-size屬性值

這樣我們的頁面就可以拉回到設計圖的大小了。

問題

這樣實現的話存在一些問題:

  1. 網頁中的 px 單位需要改成 rem 單位,如果開發沒考慮,后期修改任務量會很大;
  2. 對于一些第三方組件可能無法實現適配,因為三方插件中內部使用的單位為px

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/bicheng/93014.shtml
繁體地址,請注明出處:http://hk.pswp.cn/bicheng/93014.shtml
英文地址,請注明出處:http://en.pswp.cn/bicheng/93014.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

電子電路原理學習筆記---第5章特殊用途二極管---第2天

5.5閱讀數據手冊圖5-15給出了1N957B和1N4728A系列的齊納二極管數據手冊中的數據,再后面的討論中將參考這些數據。數據手冊中大部分信息是提供給電路設計者的,但有些內容在故障診斷和測試時也有必要了解。5.5.1最大功率齊納二極管的功率等于它對應的電壓與…

實現一個二維碼讓 iOS 和 Android 用戶自動跳轉到對應下載鏈接

實現一個二維碼讓 iOS 和 Android 用戶自動跳轉到對應下載鏈接 背景 開發一個APP后,需要分發Android測試包和iOS TestFlight的場景,但為兩個端分別生成二維碼,需要為二維碼標識系統以免導致用戶掃錯碼。如何實現一個二維碼讓 iOS 和 Androi…

Docker中ES安裝分詞器

1、下載好的文件上傳到虛擬機或者云服務器 https://release.infinilabs.com/analysis-ik/stable/ elasticsearch-analysis-ik-8.10.4.zip 2、將本地 ZIP 文件復制到容器內的臨時目錄(如 /tmp/) docker cp /data/elasticsearch-analysis-ik-8.10.4.zip e…

掌握while循環:C語言編程基礎

目錄 一、while循環簡介 二、if和while的對比 語法結構對比: 實際代碼對比: 三、while語句的執行流程 while循環的執行流程如下: 流程圖表示: 四、while循環實踐 練習:在屏幕上打印1~10的值 五、進階練習 題…

XML Schemas 簡介

XML Schemas 簡介 引言 XML(可擴展標記語言)是互聯網上用于數據交換的一種標準標記語言。隨著互聯網技術的飛速發展,XML因其靈活性和可擴展性而被廣泛應用于各種領域。XML Schemas(XML模式)作為一種定義XML文檔結構的機制,為XML文檔提供了嚴格的規范,確保了數據的準確…

Gradle(二)Gradle的優勢、項目結構介紹

目錄一、什么是 Gradle?二、為什么選擇 Gradle?三、Gradle 的項目結構3.1 項目結構3.2 gradle wrapper 包裝器3.3 settings.gradle 設置文件3.4 build.gradle 核心構建文件1)原始文件內容2)plugins 插件3)repositories…

機器學習-決策樹(上)

決策樹構建: 決策樹的結構與python中的二叉樹結構(PY數據結構-樹)相似,不過決策樹中除了葉節點之外的其他節點,都被稱之為“決策節點”,構建決策樹的過程,也就是選取每一個節點采用哪一個特征作為劃分依據的過程。 以…

一周學會Matplotlib3 Python 數據可視化-繪制直方圖(Histogram)

鋒哥原創的Matplotlib3 Python數據可視化視頻教程: 2026版 Matplotlib3 Python 數據可視化 視頻教程(無廢話版) 玩命更新中~_嗶哩嗶哩_bilibili 課程介紹 本課程講解利用python進行數據可視化 科研繪圖-Matplotlib,學習Matplotlib圖形參數基本設置&…

uni-app之刪除沒用的文件,搭建頁面

文章目錄一、初始化項目1.1 初始化index.vue1.2 刪除無用文件1.3 初始化后的目錄結果如下二、文件目錄分析2.1 核心文件2.2 關鍵文件夾?2.3 其他文件2.4 注意事項??三、創建頁面(pages)3.1 創建home頁面3.2 創建其他頁面3.3 查看pages.json3.4 刪除index頁面和pages.json的配…

99、【OS】【Nuttx】【構建】cmake 配置實操:問題解決

【聲明】本博客所有內容均為個人業余時間創作,所述技術案例均來自公開開源項目(如Github,Apache基金會),不涉及任何企業機密或未公開技術,如有侵權請聯系刪除 背景 接之前 blog 【OS】【Nuttx】【構建】cm…

2007-2023年各省環境保護支出統計數據

數據介紹 環境保護支出是指政府和企業為改善生態環境質量、防治污染、保護自然資源所投入的資金,涵蓋污染防治、生態修復、環境管理等多方面。污染防治支出、生態保護支出、環境管理事務、資源節約與循環利用等,當前環保支出仍面臨區域不平衡、隱性債務…

PyCharm(2025.1.3.1)綁定 Conda 環境

1. Pycharm 右下角,選擇( 如圖所示 )2. Path to conda 這里選擇如圖所示的這個文件( 在你下載的 Anaconda 文件里 ),之后在 Enviroment 中就可以看到你新創建的環境了

Liunx文件系統詳解

目錄 1.磁盤 1.1 概念 1.2 磁盤物理結構 1.3 磁盤的存儲結構 1.4 磁盤的邏輯結構 1.5 CHS && LBA地址 2.基礎文件系統 2.1 塊 ?編輯 2.2 分區 2.3 inode 3.ext2 ?件系統 3.1 宏觀認識 3.2 Block Group 3.3塊組內部構成 3.3.1 超級塊(Supe…

Mac如何安裝telnet命令

Mac如何安裝telnet命令_mac telnet-CSDN博客

【SpringBoot】持久層 sql 注入問題

目錄 概述 #{} 與 ${} 概述 前端惡意傳參,改變后端 sql 語句的語法結構,從而使后端給前端返回一些私密的數據。這種安全問題往往是因為沒有嚴格過濾參數,或者后端代碼不嚴謹導致的。 #{} 與 ${} 在 MyBatis 框架中,#{} 與 ${} 都…

怎么寫好漢語言文學專業的論文?

磨刀不誤砍柴功, 前期多看文章和文獻,吸取寫作經驗,寫作過程會更加順利噢!看到最后,相信你能得到收獲! 寫漢語言專業論文并不難,從選題、資料準備、框架搭建、正文寫作、修改定稿五個核心環節展…

MySQL User表入門教程

一、User表概述 MySQL的user表位于mysql系統數據庫中,是MySQL權限系統的核心,用于存儲用戶賬戶信息、認證方式和全局權限。通過操作此表,可實現用戶創建、權限分配及安全審計。 二、User表核心字段解析字段名作用示例值Host用戶允許連接的主機…

[NPUCTF2020]這是什么覓

題目是一個文件,我們先以記事本打開一下,開頭就是PK,基本可以確定這是一個 ZIP 格式的壓縮包?,不確定可以用winhex打開:?50 4B 03 04開頭則 100% 是 ZIP 文件。改一下后綴之后解壓得到一張圖片上面是日期&#xff0c…

每日任務day0812:小小勇者成長記之擠牛奶

清晨,薄霧還繚繞在草地上,小小勇者背著編織籃子來到農場。奶牛們低頭咀嚼,尾巴輕輕拍打著蒼白的露珠。老人微笑著遞給他一只溫熱的牛奶罐,說:“第一次要慢,別驚擾它們。”勇者學著老人彎下身,溫…

IIS 多用戶環境中判斷服務器是否為開發用電腦,數據狀態比較

如果只需要在 IIS 多用戶環境中判斷服務器是否為開發用電腦(一個固定狀態,通常不會動態切換),代碼可以進一步簡化。這種場景下,狀態一般是啟動時確定的(如通過配置文件或環境變量),后…