手機端開發,基礎設定1 body fontsize

2022-08-30 21:00:15 字數 665 閱讀 7968

一、設計稿設計大小按照750設計。

二、單位使用rem,相對於body  fontsize 相對大小計算。

三、假設750下,body fontsize 為100,為了方便計算。

四、通過設定當前裝置的 fontsize值,賦予 rem,變值屬性。

rem.js:

(function ()

changerootfont();

window.addeventlistener('resize', changerootfont,false);

})();

**效果:

假設現在的裝置是iphone6,物理畫素是750,邏輯畫素為375(css畫素)。

那麼iphone6的寬度為375px,(window.innerwidth / designwidth) * rem2px,使得body fontsize為50px。

設計稿的100px,css書寫為1rem,在iphone6上呈現的大小為 1*50=50px。進而實現瀏覽器端的自動縮放。

邏輯畫素:

早期螢幕解析度比較小邏輯畫素等於物理畫素,螢幕技術逐漸提公升導致在相同物理寬度下1個畫素點變的更小,導致12px檢視效果太小。

蘋果公司首先在safri中增加了meta  viewport 標籤,逐漸andriod廠商也增加了此引數。從而有了畫素邏輯。

專業手機遊戲開發基礎(1)

遊戲的基本結構 遊戲是什麼呢?在遊戲中,往往是顯示各種各樣的畫面,玩家可以做一些設定好的控制,畫面根據玩家的控制有所變化。從這兒可以看出,遊戲至少需要三個功能 顯示畫面,接受玩家輸入和對輸入產生反饋。這就是常說的渲染,輸入輸出和邏輯三個模組。將這三個模組組合在一起有很多方法。比如事件驅動 畫面保持不...

專業手機遊戲開發基礎(1)

遊戲的基本結構 遊戲是什麼呢?在遊戲中,往往是顯示各種各樣的畫面,玩家可以做一些設定好的控制,畫面根據玩家的控制有所變化。從這兒可以看出,遊戲至少需要三個功能 顯示畫面,接受玩家輸入和對輸入產生反饋。這就是常說的渲染,輸入輸出和邏輯三個模組。將這三個模組組合在一起有很多方法。比如事件驅動 畫面保持不...

手機端網頁開發的兩個重要設定

以 開頭的css語法稱為查詢,css3引入了 media查詢。css其實就是通過選擇器決定何時啟用一些屬性配置。這種思想不僅僅可以用在介面上,也可以用在工程設計上。例如有許多種操作,命中不同規則時啟用不同的操作 有許多種配置,在不同環境下啟用不同的配置。media就是用來在不同介面環境下啟用不同的配...