สวัสดีครับ ผมเป็น มือใหม่ frontend ผมมีข้อสงสัย กับการ กำหนด ความสูง ของ element ให้เหมาะสมทุก resolution อะครับ
คือ ผมก็ศึกษา จากเว็บมาบ้างแล้วครับ แต่ อ่านไม่ค่อยออก TOT ผมเลยอยากสอบถามพวกพี่ๆว่า ตอนนี้วิธีที่ผมทำ มันคือ ปกติทั่วไปของการออกแบบ รึป่าวครับ
คือ ผมใช้หน่วย px ในการกำหนดความสูงของ element โดยจะกำหนดความสูงให้แตกต่างกันโดยใช้ media rule เข้าช่วย Code
@media only screen and (max-width: 600px) and (min-width: 400px) {
.header{
height:100px;
}
}
@media only screen and (max-width: 800px) and (min-width: 601px) {
.header{
height:150px;
}
}
ซึ่งผมรู้สึกใช้เวลานานกว่าจะทำได้ 1 หน้าอะครับ ผมเลยลองใช้หน่วยอื่นๆ ซึ่งผลก็ไม่ work เท่าไร ( คือ ผมมือใหม่อะครับ ไม่รู้ว่าใช้ถูกหรือป่าว ถ้าผิดพลาดประการใดต้องขออภัยด้วยครับ)
ผมใช้เป็นหน่วย % ซึ่งปรากฎว่ามันคำนวณจาก พื้นที่ปัจจุบัน ถ้า device เป็นแนวนอน ก็ ไม่ work
ผมใช้เป็นหน่วย vh ซึ่งปรากฎว่ามันดีครับ แต่มันไม่ support device รุ่นเก่าๆ
ผมใช้เป็นหน่วย em หรือ rem มันก็พอจะยืดหยุ่นครับ เพราะมันดูตาม front-size แต่ผมว่ามันไว้ใช้กับ font มากกว่า