移動設備上的css網頁設計

我想知道像素是如何從一個屏幕尺寸翻譯成另一個網頁。舉例來說，我指定 margin-left：50px;

，如果我在我的iPad的WebView加載該網頁，我測量它（用尺子軟件，在PX）這的確是50px的如果我在我的桌面瀏覽器加載該網頁，它的確是50px的但當負載這個網頁在我的iPhone的Web視圖（這需要整個iPhone屏幕），它被測量爲40px，而不是我指定的50。

當然iphone屏幕比較小，需要做一些縮放我猜..？是對的嗎？
這個轉換是如何完成的？過程是什麼？有沒有一些公式？
這對設計師來說意味着什麼？我如何知道我應該分配的正確大小，所以佈局不會在所有屏幕上都打破？
我通常先在大屏幕上編碼，然後看它如何在小屏幕上運行。這是正確的做法。

我要爲＃2的好，大的答案，可以有人幫

來源

2012-03-23 user1118019

採取我認爲你只是exagerating的事實，向_new Web開發。可怕的數學，它不是一個火箭科學。相信自己。據我所知1,4是正確的。 3）如果你對佈局使用jQuery Mobile來渲染你的網頁非常特別（它對瀏覽器和移動瀏覽器來說也是一樣）。 – uday 2012-03-23 17:22:44

我強烈建議你看看相對大小......它將相對於設備。查看任何有關響應式網頁設計的文章。硬像素值是否定的，如果你得到百分比和相對大小，它通常會解決很多問題。現在，如果你是新開發Web開發人員，你需要在進入響應式之前進行一些學習。你也可以做一些關於媒體查詢的研究。只是媒體查詢它的臨時解決方案。

來源

2012-03-23 18:31:29 cschneider27

我建議你看看jQuery Mobile的和視口。基本上你需要設置所有的百分比而不是固定的寬度，因爲每個設備都有不同的屏幕尺寸+你需要考慮水平和垂直視圖。

這視窗元可確保頁面尺寸屏幕寬度的100％，在任何情況下：

<meta name="viewport" content="initial-scale=1, maximum-scale=1">

來源

2012-03-23 17:16:45

你已經覆蓋身體的保證金？某些瀏覽器具有不同的默認值。如果你看一下IE6，你會發現這樣的事情：

「對身體IE 6默認餘量爲15像素（頂部和底部）10px的（左和右）」

這是一個很好的做法，對具有一些默認值的CSS文件重置瀏覽器的默認值。

來源

2012-03-23 17:22:32 koalabruder

@media（最小寬度：1200像素）{

@media（最大寬度：980px）{

@media（最大寬度：979px）{

@media（分-width：980px）{

@media（最小寬度：768px）和（最大寬度：979px）{

@media（最大寬度：768px）{

個

@media（最大寬度：767px）{

@media（最大寬度：480像素）{

從的Joomla 3.0

來源

2013-05-21 09:26:11

移動設備上的css網頁設計

回答

相關問題