我正在嘗試制作一個根據視窗大小調整大小的網頁，下面的代碼似乎是解決方案。
var scale = Math.min( availableWidth / contentWidth, availableHeight / contentHeight );
有人可以告訴我為什么這有效，我們到底在做什么？
請參閱此以獲取更多資訊。
uj5u.com熱心網友回復：
您發布的代碼是取某個組件的寬度與整個頁面的寬度以及同一組件的高度與整個頁面的高度之間的百分比，但它只得到兩者之間較小的比例計算為考慮頁面是橫向還是縱向布局。
顯然，您發布的這條線產生的這個數字將用于計算您想要獲得的值，因為您在用于繪制的默認螢屏中發生了變化。假設您正在繪制默認布局的畫布是 1024 像素 x 768 像素，我們會這樣做：
var scale = Math.min(
availableWidth / /*1024px*/
contentWidth, /*500px => (100 / 2048) = 48.82% of available height */
availableHeight / /*768px/*
contentHeight /*145px (100 / 5.2965) = 19.02% of available height*/
);
在這種情況下，您的行將帶來 19.02%，因為 Math.min 方法帶來了最小的陣列。因此，您也可以使用此物件的高度作為參考來確定其寬度，以盡量保持頁面的縱橫比。但在我看來，理想的事情是你學會處理 flex 布局，甚至可能使用 bootstrap，以更少的作業來構建回應式網格，因為 CSS 會根據螢屏大小原生地為你縮放，而不需要計算。;D
uj5u.com熱心網友回復：
我認為這段代碼正在嘗試計算它應該根據不同的 window.size 調整內容的比例。
比如你在 1600*960px 大小的視窗設計網站，但是當你進入 300*200 的視窗時，有些內容并不能完全顯示，所以你需要有一個比例來縮放以使內容可以以正確的樣式顯示
該availableHeight和availableWidth是視窗的大小。的contentWidth和contentHeight是一個特定的內容的大小（div在doc）
您將視窗大小除以內容大小并使用 Math.min() 獲取其中較小的一個，這將確保您使用視窗的最大空間，但不會使內容過大或不遵循你想要的效果。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/408522.html
標籤：