Tetapi bagaimana jika wadah itu bukan viewport (badan)?
Pertanyaan ini ditanyakan dalam komentar oleh Alex di bawah jawaban yang diterima .
Fakta itu tidak berarti vwtidak dapat digunakan sampai batas tertentu untuk ukuran wadah itu. Sekarang untuk melihat variasi sama sekali, kita harus mengasumsikan bahwa wadah itu fleksibel. Baik melalui persentase langsung widthatau melalui 100% minus margin. Intinya menjadi "dapat diperdebatkan" jika wadah selalu diatur ke, katakanlah, 200pxlebar - lalu tetapkan font-sizeyang berfungsi untuk lebar itu.
Contoh 1
Namun, dengan wadah lebar yang fleksibel, harus disadari bahwa dalam beberapa hal kontainer tersebut masih berukuran di luar viewport . Karena itu, masalah menyesuaikan vwpengaturan berdasarkan perbedaan ukuran persentase ke viewport, yang berarti memperhitungkan ukuran pembungkus induk. Ambil contoh ini :
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;
}
Dengan asumsi di sini divadalah anak dari body, itu adalah 50%dari 100%lebar itu, yang merupakan ukuran viewport dalam kasus dasar ini. Pada dasarnya, Anda ingin menetapkan vwyang akan terlihat bagus untuk Anda. Seperti yang Anda lihat dalam komentar saya di konten CSS di atas, Anda dapat "memikirkan" secara matematis sehubungan dengan ukuran viewport penuh, tetapi Anda tidak perlu melakukan itu. Teks akan "melentur" dengan wadah karena wadah melentur dengan mengubah ukuran viewport. PEMBARUAN: inilah contoh dua wadah dengan ukuran berbeda .
Contoh 2
Anda dapat membantu memastikan ukuran viewport dengan memaksa penghitungan berdasarkan itu. Pertimbangkan contoh ini :
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;
}
Ukurannya masih berdasarkan dari viewport, tetapi pada dasarnya diatur berdasarkan ukuran kontainer itu sendiri.
Haruskah Ukuran Kontainer Berubah Secara Dinamis ...
Jika ukuran elemen kontainer akhirnya berubah secara dinamis, persentase hubungannya baik melalui @media breakpoints atau melalui JavaScript, maka apa pun "target" dasar akan perlu perhitungan ulang untuk mempertahankan "hubungan" yang sama untuk ukuran teks.
Ambil contoh # 1 di atas. Jika divdiubah menjadi 25%lebar oleh salah satu @mediaatau JavaScript, maka pada saat yang sama, font-sizeperlu menyesuaikan dalam permintaan media atau dengan JavaScript ke perhitungan baru 5vw * .25 = 1.25. Ini akan menempatkan ukuran teks pada ukuran yang sama seperti jika "lebar" 50%wadah asli dikurangi setengah dari ukuran viewport, tetapi sekarang telah berkurang karena perubahan dalam perhitungan persentase sendiri.
Sebuah tantangan
Dengan fungsi CSS3 yangcalc() digunakan, akan menjadi sulit untuk menyesuaikan secara dinamis, karena fungsi itu tidak berfungsi untuk font-sizetujuan saat ini. Jadi Anda tidak bisa melakukan penyesuaian CSS 3 murni jika lebar Anda berubah calc(). Tentu saja, penyesuaian kecil lebar untuk margin mungkin tidak cukup untuk menjamin perubahan apa pun font-size, jadi mungkin tidak masalah.
font-size: 100%;berarti 100% dari ukuran teks seharusnya (yaitu yang diwarisi dari induknya). Secara default yaitu 16px. Jadi jika Anda menggunakan 50%, itu akan menjadi ukuran font: 8px