เรามาพูดถึงการออกแบบความสูงในหน้าเว็บแบบตอบสนองกันดีกว่า คุณจำเป็นต้องลดความสูงของเบราว์เซอร์หรือไม่?

เมื่อคุณเห็นชื่อนี้คุณอาจคิดว่ามีการพิมพ์ผิดอีกแบบคือการออกแบบส่วนสูงที่ตอบสนองได้? คุณจริงจังไหม? เนื่องจากโดยทั่วไป "การออกแบบเว็บที่ตอบสนอง" จะตรวจสอบเบราว์เซอร์ตามความกว้างและขนาดอุปกรณ์ที่หลากหลาย โดยทั่วไปเราปรับการตอบสนองในแนวนอนโดยการลดความกว้าง แต่ฉันไม่ค่อยเห็นการพิจารณาการตอบสนองในแนวตั้งโดยการลดความสูงของเบราว์เซอร์ ในเวลานี้ Zhimimi อาจมีความผันผวนเล็กน้อยในใจ โดยมีคำถาม: เราจำเป็นต้องลดความสูงของเบราว์เซอร์ลงหรือไม่? ใช่แล้ว เรามาพูดถึงมันกันต่อไป

เมื่อเรากำลังออกแบบเว็บไซต์ การคาดเดาโดยไม่อาศัยข้อมูลจริงนั้นไม่ดีเลย ความรับผิดชอบของการทดสอบแนวนอนและแนวตั้งก็มีความสำคัญเช่นกัน

ทำไมต้องทดสอบความสูง?

สำหรับนักออกแบบ การสันนิษฐานที่ไม่สมเหตุสมผลถือเป็นปัจจัยสำคัญประการหนึ่งที่ทำลายการออกแบบเว็บไซต์ ตัวอย่างเช่น ถือว่าไม่ถูกต้องหากผู้ใช้ต้องเรียกดูเว็บไซต์โดยใช้ความกว้างและความสูงของหน้าจอเต็ม เราต้องพิจารณาสถานการณ์ที่เลวร้ายที่สุดแทน

จิมิ เข้าใจไหม? ความจริงก็คือไม่ใช่ผู้ใช้ทุกคนจะใช้เบราว์เซอร์อย่างที่เราคาดหวัง ฉันพบว่าเว็บไซต์ดูแย่มากเมื่อฉันลดความสูงของเบราว์เซอร์ลง

BrowserDevTools

การปรับขนาดเบราว์เซอร์ (แนวตั้ง) ไม่ใช่วิธีเดียวที่จะเปลี่ยนความสูงของวิวพอร์ต เมื่อเราเปิดเบราว์เซอร์ DevTools มันจะใช้ความสูงของเบราว์เซอร์ด้วย

พื้นที่ลูกศรในภาพด้านบนแสดงถึงความสูงของวิวพอร์ตปัจจุบัน สำหรับหน้าจอแล็ปท็อปขนาดเล็ก เราจะเห็นเพียงส่วนเล็กๆ ของหน้าเว็บเท่านั้น

คำถามที่แท้จริงคือ เราสามารถปรับปรุงประสบการณ์ผู้ใช้เมื่อความสูงของวิวพอร์ตน้อยลงได้หรือไม่ ใช่ มันเป็นไปได้ เรามาดูกันดีกว่า

คิดในแนวตั้งใน CSS

ในฐานะนักออกแบบและนักพัฒนา พวกเราบางคนมุ่งเน้นเฉพาะการเปลี่ยนแปลงความกว้างของการออกแบบและไม่สนใจการเปลี่ยนแปลงความสูงของวิวพอร์ต ตัวอย่างเช่น ในการพัฒนา UI จัดเตรียมส่วนประกอบเฉพาะที่หลากหลายตามความกว้างของวิวพอร์ตที่แตกต่างกัน แต่ความสูงของวิวพอร์ตที่แตกต่างกันล่ะ?

ในภาพด้านบน เรามีเมนูการนำทางที่ปรับตามความสูงของวิวพอร์ต - หากวิวพอร์ตมีขนาดเล็ก (เช่น iPhone 5) รายการการนำทางจะปรากฏเป็นตารางสองคอลัมน์ วิธีคิดนี้มักจะถูกละทิ้งหรือปรับให้เหมาะสมจนกระทั่งมีคนบอกว่าควรทำ

มีสองวิธีที่แตกต่างกันในการบรรลุข้อกำหนดข้างต้นใน CSS:

คำสั่งสื่อแนวตั้งหน่วย Viewport

แบบสอบถามสื่อแนวตั้ง

Zhimimi รู้วิธีใช้คำสั่งสื่อความกว้างใน CSS อย่างแน่นอน

@media (ความกว้างขั้นต่ำ: 700px) { .element { /* do some.. */ }}

ที่ใช้กันน้อยกว่าคือแบบสอบถามสื่อแนวตั้ง ซึ่งจะตรวจสอบความสูงของวิวพอร์ต

@media (ความสูงขั้นต่ำ: 500px) { .element { /* do some.. */ }}/* หรือ */@media (orientation: แนวนอน) { .element { /* do some.. */ }}

หน่วยวิวพอร์ต

การใช้หน่วยวิวพอร์ตสามารถช่วยมอบประสบการณ์ที่ดีขึ้นให้กับผู้ใช้ ตัวอย่างเช่น ควบคุมระยะห่างแนวตั้งระหว่างองค์ประกอบตามความสูงของวิวพอร์ต

.hero__title { ขอบล่าง: คำนวณ (10px + 5vh);}

ดังที่แสดงไว้ด้านบน สำหรับหน้าจอขนาดใหญ่ (เช่น iMac 27 นิ้ว) ขอบด้านล่างจะมีขนาดใหญ่มาก เรามีสองวิธีในการแก้ปัญหามาร์จิ้นที่มากเกินไป

สื่อแบบสอบถามฟังก์ชันการเปรียบเทียบ CSS

วิธีแรก (คำสั่งสื่อ) ได้รับการสนับสนุนมากขึ้น หากหน้าจอมีขนาดใหญ่ เราต้องตั้งค่าสูงสุดให้กับระยะขอบด้านล่าง

@media (ความกว้างขั้นต่ำ: 2200px) { .hero__title { ขอบด้านล่าง: 40px }}

อีกวิธีหนึ่งคือการใช้ฟังก์ชันการเปรียบเทียบ CSS () ฟังก์ชันของฟังก์ชันแคลมป์ () คือการส่งคืนช่วงของค่า

.hero__title { ขอบล่าง: แคลมป์ (10px, 5vh, 40px);}

ใช้กรณีที่หนึ่ง: เนื้อหาทับซ้อนกัน

ในตัวอย่างนี้ มีพื้นที่ส่วนที่มีส่วนสำหรับชื่อเรื่องและภาพประกอบ และความสูงของส่วนจะเท่ากับ 100% ของความสูงของวิวพอร์ต

ทุกอย่างดูดีจนกว่าความสูงของวิวพอร์ตจะเล็กลง ความสูงของส่วนจะไม่เพียงพอที่จะรองรับภาพประกอบและเนื้อหาข้อความ ดังนั้นจึงจะซ้อนทับส่วนอื่น ๆ ของหน้า

สังเกตว่าภาพประกอบซ้อนทับส่วนด้านล่างอย่างไร สิ่งนี้เกิดขึ้นเนื่องจากมีพื้นที่แนวตั้งเพียงพอ มาดู HTML และ CSS กัน

<p class="hero"> <p class="hero__wrapper"> <p class="hero__content"><!-- เนื้อหา --></p> <img class="hero__thumb" src="figure.png" alt="" /> </p></p>

ซีเอสเอส

.hero { ความสูง: 100vh;}.hero__thumb { ดิ้น: 0 0 550px; ความกว้าง: 550px;}

ต่อไปนี้เป็นวิธีแก้ไขปัญหาหลายประการ:

กำหนดขนาดคงที่ (ความกว้างและความสูง) สำหรับภาพประกอบแทนการกำหนดความกว้าง การขาดความสูงจะยังคงประสบปัญหานี้อยู่ ความสูง: 100vh เฉพาะในกรณีที่ความสูงของวิวพอร์ตมากกว่า 700px (ค่าการสืบค้นสื่ออาจแตกต่างกันไปขึ้นอยู่กับบริบท)

เราสามารถรวมทั้งสองเข้าด้วยกันเพื่อให้ได้โซลูชันที่ทรงพลังยิ่งขึ้น

.hero__thumb { width: 400px; height: 300px; object-fit: contains; /* เพื่อหลีกเลี่ยงการบีบอัดรูปภาพ */}@media (min-height: 700px) { .hero { height: 100vh;

เอาล่ะ ตอนนี้เราเห็นพ้องกันว่าการใช้การสืบค้นสื่อแนวตั้งจะดีกว่า อย่างไรก็ตาม การใช้ 100vh นั้นมีความเสี่ยง เนื่องจากแม้ว่าเราจะจำกัดขนาดของภาพประกอบ เราก็อาจไม่สามารถทำเช่นเดียวกันกับเนื้อหาข้อความได้ หากเนื้อหาข้อความยาวขึ้น ปัญหาเดียวกันนี้จะเกิดขึ้นอีกครั้ง ดูรูปด้านล่าง:

เพื่อแก้ปัญหานี้ เราสามารถใช้ min-height แทนความสูงได้ ด้วยวิธีนี้หากเนื้อหายาวขึ้น ความสูงก็จะขยายออกและไม่ทับซ้อนกัน

@media (ความสูงขั้นต่ำ: 700px) { .hero { ความสูงขั้นต่ำ: 100vh;

หัวคงที่

การปักหมุดชื่อขณะเลื่อนไม่ใช่เรื่องเลวร้าย อย่างไรก็ตาม เราต้องการให้แน่ใจว่าเราจะปักหมุดชื่อเฉพาะเมื่อพื้นที่ในแนวตั้งดีเพียงพอเพื่อให้ได้รับประสบการณ์ที่ดี

นี่คือเว็บไซต์เกี่ยวกับทิวทัศน์ ในที่นี้ เราจะเห็นได้ว่าเมื่อความสูงน้อยเกินไป ความสูงคงที่จะใช้พื้นที่โดยรวมมาก สิ่งนี้สำคัญต่อผู้ใช้จริงหรือ? โดยส่วนใหญ่แล้วไม่สำคัญเพราะผู้ใช้ทั่วไปจะไม่ซูมออกเพื่อดูเว็บไซต์ประเภทนี้ ในปัจจุบัน หากเราต้องการเพิ่มประสิทธิภาพ เราก็สามารถทำได้ แนวคิดก็คือการใช้คิวรีสื่อแนวตั้งเพื่อเปลี่ยนตำแหน่งคงที่เป็นตำแหน่งคงที่ เมื่อตัดสินว่าความสูงน้อยกว่าความสูงที่กำหนด

@media (ความสูงขั้นต่ำ: 700px) { .site-header { /* ตำแหน่ง: คงที่ หรือ ตำแหน่ง: เหนียว */ }}

ซ่อนองค์ประกอบที่สำคัญน้อยกว่า

ฉันสังเกตเห็นรูปแบบนี้บนแถบนำทางของ Twitter.com แนวคิดคือการรวมข้อความค้นหาสื่อแนวตั้งเข้ากับรูปแบบ Priority+

เมื่อปรับขนาดความสูงของวิวพอร์ต องค์ประกอบที่สำคัญน้อยกว่า (บุ๊กมาร์กและรายการ) จะถูกลบออกและผนวกเข้ากับเมนูเพิ่มเติม ซึ่งเป็นกรณีการใช้งานที่ดีสำหรับคำสั่งสื่อแนวตั้ง

.nav__item - รอง { จอแสดงผล: ไม่มี;}@media (ความสูงขั้นต่ำ: 700px) { .nav__item - รอง { จอแสดงผล: บล็อก }}

ลดระยะห่าง-การนำทาง

หากเว็บไซต์ของเรามีแถบด้านข้างหรือแถบด้านข้าง เมื่อความสูงของวิวพอร์ตมีขนาดเล็ก เราสามารถลดระยะห่างแนวตั้งระหว่างรายการนำทางบางรายการได้ ซึ่งจะปรับปรุงการออกแบบโดยรวมด้วย

.nav__item { ช่องว่างภายใน: 4px; ช่องว่างภายใน: 4px;}@media (ความสูงขั้นต่ำ: 700px) { .nav__item { ช่องว่างภายใน: 10px;

กล่องโมดอล

เรารู้ว่ากล่องโมดอลควรอยู่ตรงกลางแนวนอนเป็นอย่างน้อย อย่างไรก็ตาม บางครั้งเราจำเป็นต้องจัดกึ่งกลางในแนวตั้งด้วย โดยทั่วไปเราใช้วิธีแก้ปัญหาต่อไปนี้:

.modal__body { ตำแหน่ง: สัมบูรณ์; ซ้าย: 50%; ด้านบน: 50%; การแปลง: แปล (-50%, -50%);

อย่างไรก็ตาม มีปัญหาเมื่อเนื้อหายาว โมดอลจะเต็มหน้าจอในแนวตั้ง และผู้ใช้จะไม่สามารถเลื่อนได้

มีสาเหตุหลายประการสำหรับสถานการณ์นี้:

กล่องโมดอลไม่มีความสูง และโมดอลอยู่กึ่งกลางในแนวตั้ง (ซึ่งจะทำให้ปัญหาเกิดขึ้นเร็วขึ้น)

นี่คือ CSS ที่ได้รับการซ่อมแซม:

.modal__body { ตำแหน่ง: สัมบูรณ์; ซ้าย: 50%; ด้านบน: 3rem; ความกว้าง: 500px; ความสูงขั้นต่ำ: 200px; (ความสูงขั้นต่ำ: 700px) { .modal__body { ด้านบน: 50%; การแปลง: แปล (-50%, -50% }}

โปรดทราบว่าฉันใช้ min-height และ max-height min-height เป็นเรื่องเกี่ยวกับการรักษา modal ให้ดูดีแม้ว่าเนื้อหาจะสั้น แต่ max-height คือการจำกัดความสูงโดยใช้ค่าเฉพาะแทนที่จะเพิ่มความสูงคงที่

สรุป

เมื่อออกแบบประสบการณ์ ควรคำนึงถึงความกว้างและความสูง การปรับขนาดเบราว์เซอร์ของคุณในแนวตั้งอาจจะดูแปลกไปสักหน่อย แต่ก็มีข้อดีอยู่ ในบทความนี้ เราจะพูดถึงความสำคัญของการทดสอบแนวตั้งและวิธีที่เราทำการทดสอบในแนวตั้ง สุดท้ายนี้ เราจะเสนอตัวอย่างและกรณีการใช้งานที่เราหวังว่าจะเป็นประโยชน์กับผู้ใช้ smartmi

ข้างต้นเป็นเรื่องเกี่ยวกับการออกแบบความสูงของหน้าเว็บแบบตอบสนอง คุณจำเป็นต้องลดความสูงของเบราว์เซอร์หรือไม่? สำหรับรายละเอียดเพิ่มเติม โปรดอ่านบทความอื่นๆ ที่เกี่ยวข้องบนเว็บไซต์นี้!