แต่ถ้าคอนเทนเนอร์ไม่ใช่วิวพอร์ต (ร่างกาย)
คำถามนี้เป็นคำถามที่ถามในความคิดเห็นโดยอเล็กซ์ภายใต้คำตอบที่ได้รับการยอมรับ
ความจริงนั้นไม่ได้หมายความว่าvwไม่สามารถใช้ในขนาดที่พอเหมาะสำหรับคอนเทนเนอร์นั้น ทีนี้เมื่อต้องการดูการเปลี่ยนแปลงใด ๆ เลยต้องสมมติว่าคอนเทนเนอร์ในบางวิธีมีความยืดหยุ่นในขนาด ไม่ว่าจะผ่านเปอร์เซ็นต์โดยตรงwidthหรือโดยผ่าน 100% ลบด้วยระยะขอบ จุดกลายเป็น "moot" ถ้าตั้งค่าคอนเทนเนอร์ไว้เสมอให้พูด200pxกว้าง - จากนั้นเพียงตั้งค่าfont-sizeที่ใช้งานได้สำหรับความกว้างนั้น
ตัวอย่างที่ 1
ด้วยภาชนะที่มีความกว้างที่มีความยืดหยุ่น แต่มันจะต้องตระหนักว่าในบางวิธีภาชนะที่จะยังคงถูกปิดขนาดวิวพอร์ต ด้วยเหตุนี้จึงเป็นเรื่องของการปรับการvwตั้งค่าตามความแตกต่างของขนาดเปอร์เซ็นต์เป็นวิวพอร์ตซึ่งหมายถึงการคำนึงถึงขนาดของการห่อหุ้มพาเรนต์ ใช้ตัวอย่างนี้ :
div {
width: 50%;
border: 1px solid black;
margin: 20px;
font-size: 16px;
/* 100 = viewport width, as 1vw = 1/100th of that
So if the container is 50% of viewport (as here)
then factor that into how you want it to size.
Let's say you like 5vw if it were the whole width,
then for this container, size it at 2.5vw (5 * .5 [i.e. 50%])
*/
font-size: 2.5vw;
}
สมมติว่าที่นี่divเป็นลูกของbodyมันเป็น50%ที่100%กว้างซึ่งเป็นขนาดวิวพอร์ตในกรณีพื้นฐาน โดยทั่วไปคุณต้องการตั้งค่าvwที่จะดูดีกับคุณ ดังที่คุณเห็นในความคิดเห็นของฉันในเนื้อหา CSS ข้างต้นคุณสามารถ "คิด" ผ่านทางคณิตศาสตร์ที่เกี่ยวกับขนาดวิวพอร์ตแบบเต็ม แต่คุณไม่จำเป็นต้องทำเช่นนั้น ข้อความกำลังจะ "โค้ง" กับคอนเทนเนอร์เนื่องจากคอนเทนเนอร์กำลังโค้งด้วยการปรับขนาดวิวพอร์ต UPDATE: นี่คือตัวอย่างของสองภาชนะบรรจุขนาดที่แตกต่างกัน
ตัวอย่างที่ 2
คุณสามารถช่วยให้แน่ใจว่าการปรับขนาดวิวพอร์ตโดยบังคับให้คำนวณตามนั้น ลองพิจารณาตัวอย่างนี้ :
html {width: 100%;} /* Force 'html' to be viewport width */
body {width: 150%; } /* Overflow the body */
div {
width: 50%;
border: 1px solid black;
margin: 20px;
font-size: 16px;
/* 100 = viewport width, as 1vw = 1/100th of that
Here, the body is 150% of viewport, but the container is 50%
of viewport, so both parents factor into how you want it to size.
Let's say you like 5vw if it were the whole width,
then for this container, size it at 3.75vw
(5 * 1.5 [i.e. 150%]) * .5 [i.e. 50%]
*/
font-size: 3.75vw;
}
การปรับขนาดยังคงยึดตามวิวพอร์ต แต่อยู่ในการตั้งค่าที่สำคัญโดยยึดตามขนาดของคอนเทนเนอร์เอง
ขนาดของคอนเทนเนอร์ควรเปลี่ยนแบบไดนามิกหรือไม่ ...
หากการกำหนดขนาดขององค์ประกอบคอนเทนเนอร์สิ้นสุดลงการเปลี่ยนแปลงความสัมพันธ์ของเปอร์เซ็นต์แบบไดนามิกทั้งผ่าน@mediaจุดพักหรือผ่าน JavaScript ดังนั้นสิ่งใดก็ตามที่ "เป้าหมาย" ฐานจะต้องคำนวณใหม่เพื่อรักษา "ความสัมพันธ์" เดียวกันสำหรับการปรับขนาดข้อความ
ใช้ตัวอย่าง # 1 ด้านบน หากdivได้รับการเปลี่ยนไป25%ความกว้างโดยทั้ง@mediaหรือ JavaScript แล้วในเวลาเดียวกันfont-sizeจะต้องมีการปรับตัวทั้งในแบบสอบถามสื่อหรือ JavaScript 5vw * .25 = 1.25เพื่อการคำนวณใหม่ สิ่งนี้จะทำให้ขนาดตัวอักษรมีขนาดเท่ากันซึ่งจะมี "ความกว้าง" ของ50%คอนเทนเนอร์ดั้งเดิมลดลงครึ่งหนึ่งจากการปรับขนาดวิวพอร์ต แต่ตอนนี้ถูกลดลงเนื่องจากการเปลี่ยนแปลงการคำนวณเปอร์เซ็นต์ของตัวเอง
ความท้าทาย
ด้วยการcalc()ใช้งานฟังก์ชั่นCSS3มันจะเป็นการยากที่จะปรับแบบไดนามิกเนื่องจากฟังก์ชั่นนั้นไม่สามารถใช้งานได้ตามfont-sizeวัตถุประสงค์ในเวลานี้ ดังนั้นคุณไม่สามารถปรับ CSS 3 ได้อย่างแท้จริงหากความกว้างของคุณเปลี่ยนcalc()ไป แน่นอนว่าการปรับความกว้างเล็กน้อยสำหรับระยะขอบอาจไม่เพียงพอที่จะรับประกันการเปลี่ยนแปลงใด ๆfont-sizeดังนั้นจึงอาจไม่สำคัญ
font-size: 100%;หมายถึง 100% ของขนาดข้อความที่จะได้รับ (เช่นข้อความที่สืบทอดจากแม่ของมัน) โดยค่าเริ่มต้นนั่นคือ 16px ดังนั้นถ้าคุณใช้ 50% มันจะเป็นขนาดตัวอักษร: 8px