เรียนรู้วิธีที่เว็บเบราเซอร์กำหนดการแสดงผลโดยใช้เปอร์เซ็นต์ค่า
นักเรียนจำนวนมากใน การออกแบบเว็บที่โต้ตอบตอบสนอง ได้ยากโดยใช้เปอร์เซ็นต์สำหรับค่าความกว้าง โดยเฉพาะมีความสับสนกับเบราว์เซอร์คำนวณเปอร์เซ็นต์ดังกล่าว ด้านล่างนี้คุณจะพบคำอธิบายโดยละเอียดเกี่ยวกับวิธีคำนวณเปอร์เซ็นต์สำหรับการคำนวณความกว้างในเว็บไซต์ที่ตอบสนอง
การใช้ Pixels for Width Values
เมื่อคุณใช้พิกเซลเป็นค่าความกว้างผลลัพธ์จะตรงไปตรงมามาก ถ้าคุณใช้ CSS เพื่อกำหนดค่าความกว้างขององค์ประกอบในส่วนหัวของเอกสารเป็น 100 พิกเซลกว้างองค์ประกอบนั้นจะมีขนาดเท่ากับขนาดที่คุณกำหนดไว้ที่ 100 พิกเซลในเนื้อหาหรือส่วนท้ายของเว็บไซต์หรือพื้นที่อื่น ๆ ของ หน้า. พิกเซลเป็นค่าสัมบูรณ์ดังนั้น 100 พิกเซลคือ 100 พิกเซลไม่ว่าจะเป็นองค์ประกอบใดในเอกสารของคุณ แต่น่าเสียดายที่แม้ว่าค่าพิกเซลจะเข้าใจได้ง่าย แต่ก็ไม่สามารถทำงานได้ดีในเว็บไซต์ที่มีการตอบสนอง
อีธาน Marcotte ตั้งชื่อว่า "การออกแบบเว็บที่ตอบสนอง" อธิบายวิธีนี้ว่าประกอบด้วย 3 หลักการสำคัญ:
- กริดเหลว
- สื่อของเหลว
- ข้อความค้นหาสื่อ
จุดสองจุดแรกกริดของเหลวและสื่อของเหลวทำได้โดยใช้เปอร์เซ็นต์แทนพิกเซลเพื่อกำหนดค่า
ใช้เปอร์เซ็นต์สำหรับค่าความกว้าง
เมื่อคุณใช้เปอร์เซ็นต์เพื่อสร้างความกว้างสำหรับองค์ประกอบขนาดจริงที่องค์ประกอบจะแสดงขึ้นจะแตกต่างกันออกไปขึ้นอยู่กับว่าอยู่ที่ไหนในเอกสาร เปอร์เซ็นต์เป็นค่าสัมพัทธ์ซึ่งหมายความว่าขนาดที่แสดงจะสัมพันธ์กับองค์ประกอบอื่น ๆ ในเอกสารของคุณ
ตัวอย่างเช่นถ้าคุณกำหนดความกว้างของ ภาพ เป็น 50% ไม่ได้ หมายความว่าภาพจะแสดงที่ขนาดครึ่งหนึ่งของขนาดปกติ นี่เป็นความเข้าใจที่ผิดกัน
หากภาพมีขนาดกว้าง 600 พิกเซลแล้วใช้ค่า CSS เพื่อแสดงผลที่ 50% ไม่ได้หมายความว่าจะมีความกว้าง 300 พิกเซลในเว็บเบราเซอร์ ค่าเปอร์เซ็นต์นี้คำนวณจากองค์ประกอบที่มีภาพไม่ใช่ขนาดเนทีฟของภาพ หากคอนเทนเนอร์ (ซึ่งอาจเป็นส่วนหนึ่งหรือองค์ประกอบ HTML อื่น ๆ ) มีความกว้าง 1000 พิกเซลภาพจะแสดงที่ 500 พิกเซลเนื่องจากค่าดังกล่าวเท่ากับ 50% ของความกว้างของคอนเทนเนอร์ หากองค์ประกอบที่มีอยู่กว้าง 400 พิกเซลภาพจะแสดงเฉพาะที่ 200 พิกเซลเนื่องจากมีค่าเท่ากับ 50% ของคอนเทนเนอร์ ภาพที่มีคำถามที่นี่มีขนาด 50% ซึ่งขึ้นอยู่กับองค์ประกอบที่มีอยู่ทั้งหมด
โปรดจำไว้ว่าการออกแบบที่ตอบสนองได้ดี เค้าโครงและขนาดจะเปลี่ยนเมื่อ ขนาด / อุปกรณ์ของหน้าจอเปลี่ยนแปลง ถ้าคุณคิดเกี่ยวกับเรื่องนี้ในรูปแบบที่ไม่ใช่คำที่ใช้เว็บก็เหมือนกับการมีกล่องกระดาษแข็งที่คุณบรรจุด้วยวัสดุบรรจุภัณฑ์ ถ้าคุณบอกว่ากล่องควรจะเต็มไปด้วยวัสดุครึ่งหนึ่งจำนวนบรรจุที่คุณต้องการจะแตกต่างกันไปขึ้นอยู่กับขนาดของกล่อง เช่นเดียวกับความกว้างร้อยละในการออกแบบเว็บ
เปอร์เซ็นต์ขึ้นอยู่กับเปอร์เซ็นต์อื่น ๆ
ในตัวอย่างของภาพ / คอนเทนเนอร์ฉันใช้ค่าพิกเซลสำหรับองค์ประกอบที่มีเพื่อแสดงว่าจะแสดงภาพที่ตอบสนองได้อย่างไร ในความเป็นจริงองค์ประกอบที่ประกอบด้วยจะถูกตั้งค่าเป็นเปอร์เซ็นต์และภาพหรือองค์ประกอบอื่น ๆ ภายในคอนเทนเนอร์นั้นจะได้รับค่าตามเปอร์เซ็นต์ของเปอร์เซ็นต์
นี่เป็นอีกตัวอย่างหนึ่งที่แสดงให้เห็นในทางปฏิบัติ
สมมติว่าคุณมีเว็บไซต์ที่มีไซต์อยู่ในส่วนที่มีคลาส "container" (การออกแบบเว็บทั่วไป) ภายในส่วนนั้นมีหน่วยงานอื่น ๆ สามแห่งที่คุณต้องการจะแสดงเป็นคอลัมน์แนวตั้ง 3 คอลัมน์ HTML ดังกล่าวอาจมีลักษณะดังนี้:
ตอนนี้คุณสามารถใช้ CSS เพื่อกำหนดขนาดของส่วน "คอนเทนเนอร์" ที่จะพูดได้ 90% ในตัวอย่างนี้ส่วนคอนเทนเนอร์ไม่มีองค์ประกอบอื่นที่ล้อมรอบส่วนอื่นนอกเหนือจากเนื้อหาซึ่งเราไม่ได้กำหนดค่าเฉพาะใด ๆ โดยค่าเริ่มต้นร่างกายจะแสดงผลเป็น 100% ของหน้าต่างเบราเซอร์ ดังนั้นส่วนแบ่ง "ตู้คอนเทนเนอร์" จะขึ้นอยู่กับขนาดของหน้าต่างเบราเซอร์ เนื่องจากหน้าต่างเบราว์เซอร์มีการเปลี่ยนแปลงขนาดขนาดของ "คอนเทนเนอร์" นี้ ดังนั้นหากหน้าต่างเบราเซอร์กว้าง 2000 พิกเซลส่วนนี้จะแสดงที่ 1800 พิกเซล ซึ่งคำนวณจาก 90 เปอร์เซ็นต์ของปี 2000 (2000 x .90 = 1800)) ซึ่งเป็นขนาดของเบราเซอร์
หากแต่ละส่วนของ "col" ที่พบใน "คอนเทนเนอร์" มีขนาด 30% แต่ละส่วนจะมีความกว้าง 540 พิกเซลในตัวอย่างนี้ นี่คำนวณเป็น 30% ของ 1800 พิกเซลที่คอนเทนเนอร์แสดงผลที่ (1800 x .30 = 540) ถ้าเราเปลี่ยนเปอร์เซ็นต์ของภาชนะบรรจุหน่วยด้านในเหล่านี้จะเปลี่ยนขนาดที่สร้างขึ้นเนื่องจากขึ้นอยู่กับส่วนประกอบ
สมมติว่าหน้าต่างเบราว์เซอร์ยังคงอยู่ที่ความกว้าง 2000 พิกเซล แต่เราเปลี่ยนเปอร์เซ็นต์ของคอนเทนเนอร์เป็น 80% แทนที่จะเป็น 90% นั่นหมายความว่าภาพจะแสดงผลที่ความละเอียด 1600 พิกเซลตอนนี้ (2000 x .80 = 1600) แม้ว่าเราจะไม่เปลี่ยน CSS สำหรับขนาดของ 3 "col" divisions และปล่อยไว้ที่ 30% แต่ก็จะแตกต่างกันไปในขณะนี้เนื่องจากองค์ประกอบที่มีการเปลี่ยนแปลงซึ่งเป็นบริบทที่มีขนาดถูกเปลี่ยนไป ตอนนี้ทั้ง 3 หน่วยจะแสดงผลกว้าง 480 พิกเซลซึ่งเท่ากับ 30% ของ 1600 หรือขนาดของคอนเทนเนอร์ (1600 x .30 = 480)
หากมีภาพอยู่ภายในส่วน "col" เหล่านี้และภาพนั้นมีขนาดโดยใช้เปอร์เซ็นต์เปอร์เซ็นต์บริบทสำหรับการกำหนดขนาดจะเป็น "col" ส่วน "col" เปลี่ยนขนาดดังนั้นภาพจะอยู่ภายในภาพ ดังนั้นหากขนาดของเบราเซอร์หรือ "ตู้คอนเทนเนอร์" เปลี่ยนไปจะมีผลกับส่วน "col" สามส่วนซึ่งจะเปลี่ยนขนาดของภาพภายใน "col" ดังที่คุณเห็น มันมาถึงร้อยละที่ขับเคลื่อนด้วยการกำหนดขนาดค่า
เมื่อคุณพิจารณาว่าองค์ประกอบภายในของหน้าเว็บจะแสดงผลเมื่อใช้ค่าเปอร์เซ็นต์เป็นความกว้างคุณต้องเข้าใจบริบทที่องค์ประกอบนั้นอาศัยอยู่ในมาร์กอัปของหน้า
สรุป
เปอร์เซ็นต์มีบทบาทสำคัญในการสร้างเค้าโครงสำหรับ เว็บไซต์ที่ตอบสนอง ไม่ว่าคุณจะปรับขนาดภาพตามการตอบสนองหรือใช้ความกว้างร้อยละเพื่อสร้างตารางของเหลวอย่างแท้จริงซึ่งมีขนาดเทียบกับแต่ละอื่น ๆ เข้าใจการคำนวณเหล่านี้จะมีความจำเป็นเพื่อให้ได้รูปลักษณ์ที่คุณต้องการ