2017-06-12 55 views
0

Mobile Design翻譯移動PSD爲HTML其長度單位我們應該使用VH,%,PX

對於自適應網頁設計,其長度(高度/寬度)單元我們應該使用。 我已經給所有的測量在px附加圖像。 所以我只用px開始,但沒有奏效。由於我認爲Iphone6(375x667)的附加圖像,並開始計算寬度,高度乘以單位1/375(寬度),1/667(高度)與圖像中給出的像素數。

我正在用margin,padding,border value做同樣的事情。

想知道我正朝着正確的方向走還是需要爲響應式移動開發做點別的事情?

第一個塊的CSS: height = 1/667 * 58vh; width = 1/375 * 370vw;

回答

0

寬度僅爲100%,因此不得計算。對於高度,您不需要使用特定設備的視口高度,因爲並非所有人都使用iPhone 6.對於第一個塊,您只需將高度設置爲58vh即可。您可以使用flexbox將所有內容居中,以便不必使用填充。 考慮到這在景觀上會看起來很糟糕。

+0

對於寬度,你是對的我只是使用100%,但你認爲58px爲58px是正確的方式。景觀模式我們要禁用 –

+1

你是對的,58vh是視口高度的58%,是我的錯誤。您必須使用像iPhone 6那樣的參考高度來計算vh。結果爲58px的機會很渺茫(iPhone 6除外),但這就是響應式設計的結果。計算結果爲(58/667)* 100。這將給你(四捨五入)字體大小爲8.7 – Antflow

+0

什麼我應該做的。我現在使用rem,並且在像素{ppx}處給出基本字體大小像這樣 –

相關問題