網站如何使所有設備上的元素縮放比例相同並縮放比例？

Question

現在我正在用百分比寬度和高度製作所有元素，這樣無論設備如何，它們都可以縮放。例如，某人是否在720p或4k顯示器上查看輸入元素，它應該在整個瀏覽器中保持一致。

現在我的問題是，我試圖讓我的元素在縮放（瀏覽器縮放：ctrl和+/-）增加或減少時縮放，但因爲我使用百分比寬度和高度，所以元素沒有規模。那麼其實我認爲當我放大輸入變得更小，我不知道這是爲什麼。其他網站在放大輸入時寬度和高度都會變大。當你縮小元素變小。

這樣做的正確方法是什麼？很明顯，可以這樣做，因爲我訪問的每個站點都包含在內，包括stackoverflows元素（作爲示例的搜索輸入）在查看時看起來大小相同，並且在縮放時可以在高度和寬度上縮放。

我已經試過：

1. 使用固定最小寬度和最小高度，但它不正是我想要的。如果寬度/高度百分比高於固定的最小寬度/高度，則該元素將不會調整大小，直到縮放％*固定的最小寬度/高度像素數更大。如果固定的最小寬度/高度像素數大於元素上設置的寬度/高度％，則該元素將是固定最小寬度/高度的大小，並且元素大小在所有顯示器中看起來不會相同。

2. 使用寬度/高度的固定像素將使元素在縮放時調整大小，但不會在所有顯示器上看起來相同。

3. 在父div「search」上使用flexbox，使子項輸入「test」在縮放時增大/縮小。似乎沒有做任何事情。

注意：不要試圖在沒有完整查看代碼的情況下放大，否則會因爲stackoverflow自己的代碼而導致縮放時輸入縮放。

html, body { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin:0px; 
 
} 
 
div#maincontainer { 
 
    height: 100%; 
 
    width:100%; 
 
    background-color: orange; 
 
} 
 
div#search { 
 
    position: relative; 
 
    top: 50%; 
 
    margin:auto; 
 
    height: 5%; 
 
    width: 35%; 
 
} 
 
input#test { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div id="maincontainer"> 
 
    <div id="search"> 
 
     <input id="test" type="text" placeholder="TESTING" /> 
 
    </div> 
 
</div>

Answer 1

瀏覽器縮放（使用 「CTRL和+/-」）實際上改變了font-size: 100%;（其等同於font-size: 1em;）對應的值。這就是爲什麼使用這種縮放功能時，輸入元素中的文本會縮放。但是因爲輸入元素的大小不變（見下面的解釋），看起來後者變小了......而實際上它的內部文本變得更大了。

據我所知，這個想法是讓訪客讀文本（雖然可能會破壞頁面佈局），如果由於某些原因他們在網站設計者選擇的文本大小上遇到困難。

在輸入元素的大小的情況下，因爲您相對於其容器的大小（使用百分比）來定義它，直到具有100％視圖端口的主體，您沒有給它有機會通過此功能進行縮放，但是取決於視圖端口大小。因此，如果您調整視圖端口（即瀏覽器窗口）的大小，您將看到您的元素大小發生變化，但不會看到其內部文本。這可能聽起來像你在開始時所期待的（在不同的設備上呈現完全相同的比例，實際上在不同的視圖端口大小上），但今天的網站實際上是一種完全不同的技術。

他們所做的稱爲「響應式設計」，即CSS使用可以檢測設備類型，屏幕大小（實際查看端口大小）等的「媒體查詢」。這些媒體查詢充當CSS的條件塊規則。典型的用例是在屏幕足夠寬的時候在一側渲染一個大菜單，但是當屏幕很窄時只有一個菜單按鈕。

您還可以注意到，根據視口尺寸（這是您僅使用基於百分比的尺寸時所要執行的操作），它們實際上不會以完全相同的比例進行渲染。大多數情況下，在StackOverflow中存在一個空白空間（填充空間的兩側），而內容的像素大小相同，直到視圖端口大小發生非常大的變化以觸發媒體查詢爲止，然後應用一組不同的CSS規則，可能會完全改變頁面佈局。

另一個好的做法是在em單位中使用盡可能大的尺寸（但不一定是定位），它指的是當前的字體大小。這樣，當訪問者使用瀏覽器縮放功能時，這些尺寸將相應地縮放，而不僅僅是文本。對於您的情況，您可以將輸入元素的高度定義爲例如1.5em，以便始終比其內部文本大50％。

最後，我鼓勵您使用大多數瀏覽器提供的開發工具的DOM和樣式檢查器（通過點擊F12開啓開發工具）。它們通常還提供了元素選取器，這使您可以精確定位要查看確切DOM和應用樣式規則的頁面上的元素。瞭解其他人如何設計他們的網站是一種非常具有啓發性和樂觀的方式。