如何根據縮放，分辨率和窗口大小正確縮放網頁？

Question

我忙於開發一個網絡應用程序，但我似乎無法找到縮放所有項目的正確方法，因此它適合屏幕。

正如你可以在圖片中看到，灰色的酒吧菜單，需要留在位置上。中間的內容（包括白色背景的藍色塊）需要左右移動，但也可以上下移動。調整窗口大小，縮放以及其他任何應該考慮的事項。我目前的技術失敗了很多次，所以我希望你們中的任何一位知道一些好的技術。

正如我所說，內容需要上下左右移動。所有頁面的父div與所有頁面在一起的寬度相同。所以一個頁面應該有正確的窗口寬度。高度也一樣，但橫軸上只有2頁。目前我正在使用JavaScript/JQuery調整大小。

就像一個旁註，噹噹前內容頁面大於屏幕可以顯示時，可能會垂直滾動。水平滾動是不可能的。

很難解釋，我盡我所能，但我希望有人能幫助我。

Answer 1

這很有趣！也許與時間單位合作會幫助你。這是一個巧妙的小技巧。

1 - 在您的父容器上設置字體大小爲100％。

2 - 在所有的子元素，使用EMS爲您的所有尺寸，填充，邊距，邊框，字體大小等

3 - 在Javascript中，頁面加載時，捕捉到瀏覽器尺寸並將它們保存到變量中供以後使用。

4 - 設置窗口大小調整事件。當窗口調整大小時，獲取新的瀏覽器尺寸。現在，一些基本的數學計算將允許您將新的瀏覽器尺寸與原始瀏覽器尺寸進行比較 - 並獲得一定比例。

5 - 仍然在調整大小事件中，將該新百分比設置爲父元素的字體大小。

你可以設置它只是你的中心容器 - 或其他任何東西。具有font-size屬性（並在ems中定義）的主容器的任何子元素將自動使用瀏覽器窗口進行縮放。

文本將規模 邊框尺寸將擴大 邊境半徑將擴大 尺寸，填充，利潤率將擴大

這是NEATO。