現在我正在用百分比寬度和高度製作所有元素,這樣無論設備如何,它們都可以縮放。例如,某人是否在720p或4k顯示器上查看輸入元素,它應該在整個瀏覽器中保持一致。網站如何使所有設備上的元素縮放比例相同並縮放比例?
現在我的問題是,我試圖讓我的元素在縮放(瀏覽器縮放:ctrl和+/-)增加或減少時縮放,但因爲我使用百分比寬度和高度,所以元素沒有規模。那麼其實我認爲當我放大輸入變得更小,我不知道這是爲什麼。其他網站在放大輸入時寬度和高度都會變大。當你縮小元素變小。
這樣做的正確方法是什麼?很明顯,可以這樣做,因爲我訪問的每個站點都包含在內,包括stackoverflows元素(作爲示例的搜索輸入)在查看時看起來大小相同,並且在縮放時可以在高度和寬度上縮放。
我已經試過:
使用固定最小寬度和最小高度,但它不正是我想要的。如果寬度/高度百分比高於固定的最小寬度/高度,則該元素將不會調整大小,直到縮放%*固定的最小寬度/高度像素數更大。如果固定的最小寬度/高度像素數大於元素上設置的寬度/高度%,則該元素將是固定最小寬度/高度的大小,並且元素大小在所有顯示器中看起來不會相同。
使用寬度/高度的固定像素將使元素在縮放時調整大小,但不會在所有顯示器上看起來相同。
在父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>
這絕對是我所需要的廣泛信息。你有沒有關於「響應式設計」的建議材料,以便我可以深入並嘗試讓這些元素做我想讓他們做的事情? 也有可能使用彈性盒爲了使元素縮放?我知道彈性盒子是「響應式設計」的一部分,但我不知道他們是否服務於特定目的。 – BubbleTree
對不起,我不知道推薦你這個好材料。 – ghybs
框架呢?有沒有一個廣泛使用的框架來幫助這個? – BubbleTree