คำถามติดแท็ก viewport-units

ฉันมีปัญหาแปลก ๆ ... ในทุกเบราว์เซอร์และเวอร์ชันมือถือฉันพบปัญหานี้: เบราว์เซอร์ทั้งหมดมีเมนูด้านบนเมื่อคุณโหลดหน้าเว็บ (แสดงแถบที่อยู่เป็นต้น) ซึ่งจะเลื่อนขึ้นเมื่อคุณเริ่มเลื่อนหน้า บางครั้งจะคำนวณ100vh เฉพาะในส่วนที่มองเห็นได้ของวิวพอร์ตดังนั้นเมื่อแถบเบราว์เซอร์เลื่อนขึ้น 100vh จะเพิ่มขึ้น (ในรูปของพิกเซล) เลย์เอาต์ทั้งหมดทาสีใหม่และปรับใหม่เนื่องจากขนาดมีการเปลี่ยนแปลง เอฟเฟ็กต์ที่แย่มากสำหรับประสบการณ์ของผู้ใช้ จะหลีกเลี่ยงปัญหานี้ได้อย่างไร? ตอนที่ฉันได้ยิน viewport-height ครั้งแรกฉันรู้สึกตื่นเต้นและฉันคิดว่าฉันสามารถใช้มันสำหรับบล็อกความสูงคงที่แทนที่จะใช้ javascript แต่ตอนนี้ฉันคิดว่าวิธีเดียวที่ทำได้คือ javascript ที่มีการปรับขนาดบางอย่าง ... คุณสามารถดูปัญหาได้ที่: ไซต์ตัวอย่าง ใครสามารถช่วยฉันด้วย / แนะนำวิธีแก้ปัญหา CSS? รหัสทดสอบง่าย ๆ : แสดงตัวอย่างโค้ด /* maybe i can track the issue whe it occours... */ $(function(){ var resized = -1; $(window).resize(function(){ …

288 html  css  viewport-units 

ฉันเพิ่งเรียนรู้เกี่ยวกับหน่วย CSS ใหม่และไม่ธรรมดา vhและvwวัดเปอร์เซ็นต์ของความสูงและความกว้างของวิวพอร์ตตามลำดับ ฉันดูคำถามนี้จาก Stack Overflow แต่มันทำให้หน่วยดูคล้ายกันมากขึ้น หน่วย vw และ vh ทำงานอย่างไร คำตอบกล่าวโดยเฉพาะ vw และ vh เป็นเปอร์เซ็นต์ของความกว้างและความสูงของหน้าต่างตามลำดับ: 100vw คือ 100% ของความกว้าง 80vw คือ 80% เป็นต้น ดูเหมือนว่าจะเหมือนกับ%หน่วยซึ่งพบได้บ่อย ในเครื่องมือสำหรับนักพัฒนาฉันได้ลองเปลี่ยนค่าจาก vw / vh เป็น% และในทางกลับกันและได้ผลลัพธ์เดียวกัน มีความแตกต่างระหว่างทั้งสองหรือไม่? ถ้าไม่ทำไมถูกหน่วยใหม่เหล่านี้นำไปCSS3?

149 css  viewport-units