Unity WebGL 專案, 螢幕自適應

tackor 關注

如圖所示, 使用火狐瀏覽器開啟 unity 編譯的 webgl 工程, 發現unity沒有做螢幕適配(我最初的尺寸是(375x1334).

在網上尋找了許久才找到 比較有用的文章: 

雖然這篇文章不是十分符合我的需求, 但是它讓我了解了 webgl 專案中這些檔案之間的關係. 最好根據自己的一點點html的知識,自己總結如下

index.html

dmj      

.webgl-content * 

/*新增 width: 100%; height: 100%;*/
.webgl-content 
.webgl-content .logo, .progress 
.webgl-content .logo 
.webgl-content .progress 
.webgl-content .progress .empty 
.webgl-content .progress .full 
.webgl-content .logo.dark 
.webgl-content .progress.dark .empty 
.webgl-content .progress.dark .full 
/*如果你要儲存 footer模組, 然後又要讓footer顯示在最頂部,這樣處理*/
index.html 路徑: webgl專案檔案中
style.css 路徑: webgl專案/templatedata/style.css
如果你需要修改logo, 滑動條等, 也在 webgl專案/templatedata路徑下
如果想把 webgl專案方到網上去, 那麼需要乙個伺服器(比如阿里雲), 這些不是一句話可以說清楚的, 你需要自己慢慢摸索,慢慢積累.
 
unity WebGL專案如何本地執行
unity打包出來的webgl專案是乙個資料夾，打個比方叫test資料夾，然後怎麼執行這個test資料夾中的專案呢？有沒有懵逼，沒反應過來，其實了解web的發布就輕鬆解決這問題了。兩種方法，用了這個才發現這個搭建乙個本地測試web是如此簡單，新手不推薦一點點去安裝環境，有個簡單暴力的方式就是安裝套件...
vue專案螢幕自適應 Vue專案螢幕自適應
一 安裝lib flexible npm i lib flexible d 二 在main.js中引入 import lib flexible flexible 三 在index.html檔案中設定meta標籤 四 然後在專案中寫css時會自動將rem轉化為px,需要安裝px2rem這個工具 npm...
vue專案螢幕自適應 Vue專案螢幕自適應
一 安裝lib flexible npm i lib flexible d 二 在main.js中引入 import lib flexible flexible 三 在index.html檔案中設定meta標籤 四 然後在專案中寫css時會自動將rem轉化為px,需要安裝px2rem這個工具 npm...