可擴展設計的CSS單元？

Question

我正在開發一個移動web應用程序，該應用程序應該縮放到4英寸和6英寸之間的設備。在過去，我通過使流體DIV具有基於像素的最大寬度和最小寬度屬性來創建可縮放的佈局，但我知道這並不理想;像素測量在不同的屏幕分辨率下有所不同

我應該使用什麼樣的CSS單元來執行可在4英寸和6英寸移動設備之間擴展的max-width和min-width，並考慮屏幕分辨率？

Answer 1

我使用百分比值來製作流體容器。我一直在使用它，它的工作。下面是示例CSS樣式

.container { 
    margin: 0 auto; 
    width: 95%; 
} 

@media screen and (min-width: 30em) { // equal to 480px 
    .container { 
     width: 90%; // make container bigger on wider screen 
    } 
} 

請注意，我使用移動優先的方法，推薦用於開發響應式設計。

希望得到這個幫助。

Answer 2

因爲我不知道我是否能夠得到確切的效果，所以您可以使用視口元標記使內容在不同的視口上縮放。

<meta name="viewport" content="width=device-width">