縮放HTML/CSS以適應各種顯示器，這有可能嗎？

我知道SVG支持這個。但我想知道如果HTML/CSS可以放大和縮小，就像一個圖像適合各種顯示器？例如，考慮一個基於HTML5手機應用的移動應用程序，它僅適用於iPhone（3,4,5等），android等多種不同尺寸的屏幕，以及大量的屏幕尺寸。縮放HTML/CSS以適應各種顯示器，這有可能嗎？

我不是在談論如何使用百分比寬度，比如100％，或div內20％，em字體或一堆媒體查詢。我想在我的div上使用絕對寬度/高度，因爲它更容易編程。例如，我創建一個寬度爲400px，高度爲600px的應用程序，並且該div中的所有內容（按鈕，更多div，圖像等）也使用像素高度和寬度以及位置。

現在，有沒有辦法將這個東西「縮放」爲任何想要的圖像？有點像圍繞它

<scaleToDevice> 
<div style='width:400px;height:600px'> 
    ... All my other UI here, like buttons, etc would use absolute positioning with pixels 
</div> 
</scaleToDevice>

它會「只是工作」想像你如何在Photoshop中縮放圖像。除了這隻會在HTML/CSS，縮放到設備的100％的寬度和高度，並且應用程序將保持交互。

來源

2014-09-24 foreyez

有可能，您需要使用CSS transform屬性。但是，請記住，您需要做一些數學計算，因爲您需要記住方向以及屏幕的縱橫比。但是，如果你想這樣做，你可以做到。下面是一些代碼，我給了，你可以作爲一個起點使用其他用戶：

#body { 
    width:100vw; 
    height:100vh; 
    text-align:center; 
} 
#content { 
    transform: translateY(-50%); 
    -webkit-transform:translateY(-50%); 
    top:50%; 
    transform: scale(2); 
    transform-origin: 0%; 
}

這也將使元素的比例從中心生長（這看起來例如更好地在手機上，如果你旋轉視圖。你也可以添加更平滑效果的轉換）。所以繼續嘗試吧。但有一個原因，爲什麼沒有人不這樣做：努力是不值得的最終結果，你會結束總是需要一個微調

來源

2014-09-24 05:09:10 Devin

是的..這看起來像一個「替代」解決方案尤其是與CSS轉換。我想大多數人只是使用百分比divs和媒體查詢來適應各種設備？ – foreyez 2014-09-24 05:11:23

這不是「替代品」，這可能是您按照自己的意願去做所需要的唯一方法。否則，我們正在討論常規自動調整元素，無論您是使用百分比（不適用於字體），還是使用視口大小（可以使用字體大小）。您也可以使用jQuery解決方案，但是隨着問題的解決，我認爲您可以比CSS轉換和視口大小 – Devin 2014-09-24 05:14:47

謝謝更多。還有另外一件事，我已經看到了很多，有些是>或者其他，我仍在研究它是否可以解決我的問題 – foreyez 2014-09-24 05:18:21

你想看看使用CSS視口的寬度/高度（VW/VH）屬性。

http://snook.ca/archives/html_and_css/vm-vh-units

這樣你就可以基地所有的寬/高/大小（在CSS）關閉這些大衆，VH性能，並用正確的數學你整個網站可以用的尺寸調整放大和縮小窗口。

來源

2014-09-24 04:52:43 Alex

這很有趣，我會更多地瞭解這一點。 – foreyez 2014-09-24 05:14:47

縮放HTML/CSS以適應各種顯示器，這有可能嗎？

回答

相關問題