Penskalaan fon berdasarkan saiz bekas

Question

Saya mengalami kesukaran untuk memahami isu penskalaan fon.

Saya kini mempunyai laman web dengan 100% teks badan font-size. 100% tetapi apa? Ini nampaknya dikira pada 16 piksel.

Saya mendapat tanggapan bahawa 100% entah bagaimana merujuk kepada saiz tetingkap penyemak imbas, tetapi nampaknya tidak, kerana ia sentiasa 16 piksel tidak kira sama ada tetingkap itu diubah saiz kepada lebar mudah alih atau desktop skrin lebar penuh.

Bagaimana untuk membuat teks pada skala tapak web berbanding bekasnya? Saya cuba menggunakan em tetapi itu juga tidak berskala.

Alasan saya ialah perkara seperti menu saya tersekat apabila anda mengubah saiznya, jadi saya perlu mengurangkan .menuItem px .menuItem 的 px font-size 以及其他与容器宽度相关的元素。 （例如，在大桌面上的菜单中，22px 效果很好。向下移动到平板电脑宽度，16px dan lain-lain dengan elemen berkaitan lebar kontena . (Sebagai contoh, dalam menu pada desktop yang besar, 22px berfungsi dengan baik. Bergerak ke bawah kepada lebar tablet, 16px adalah lebih sesuai.)

Saya tahu saya boleh menambah titik putus, tetapi saya benar-benar mahu teks berskala dengan baik seolah-olah saya mempunyai titik putus tambahan, jika tidak, saya akan mendapat ratusan titik putus untuk setiap 100 piksel saya mengawal lebar teks.

Answer 1

Soalan ini dijawab oleh Alex di 2507rkt3.

Hakikat bahawa

tidak bermakna vw 不能在某种程度上用于确定该容器的大小。现在要看到任何变化，我们必须假设容器在某种程度上是尺寸灵活的。无论是通过直接百分比宽度还是通过100%减去边距。如果容器总是设置为，比方说，200px 宽，那么这一点就变得“没有意义”——然后只需设置适合该宽度的font-size. p>

Contoh 1

Walau bagaimanapun, untuk bekas dengan lebar fleksibel, adalah penting untuk menyedari bahawa bekas itu masih mengubah saiz berdasarkan port pandang sedikit sebanyak. Oleh itu, tetapan perlu dilaraskan berdasarkan peratusan perbezaan saiz dari ruang pandang, yang bermaksud mengambil kira saiz pembalut induk. vwLihat 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;
}

Katakan di sini div ialah anak kepada body, iaitu 50% lebar 100%, dalam kes ini Pada asasnya ia adalah saiz viewport. Pada asasnya, anda ingin menyediakan

yang kelihatan baik kepada anda. Seperti yang anda boleh lihat dalam ulasan di atas dalam kandungan CSS, anda boleh "memikirkan" keseluruhan saiz port pandangan secara matematik, tetapi anda tidak perlu melakukannya. Teks akan "bengkok" dengan bekas kerana bekas itu bengkok apabila port pandang diubah saiznya.

Berikut adalah contoh dua bekas bersaiz berbezadiv 是 body 的子级，它是 100% 的 50%宽度，在这种基本情况下是视口大小。基本上，您想要设置一个对您来说看起来不错的 vw.

Contoh 2

Anda boleh membantu memastikan saiz port pandangan dengan memaksa pengiraan berdasarkan ini.

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;
}

Dimensi masih berdasarkan port pandang, tetapi pada asasnya ditetapkan berdasarkan dimensi kontena itu sendiri.

Sekiranya saiz bekas berubah secara dinamik...

Jika saiz elemen kontena akhirnya mengubah peratusan hubungannya secara dinamik melalui titik putus @media atau JavaScript, maka apa pun "matlamat" asas, ia perlu dikira semula untuk mengekalkan "hubungan" yang sama digunakan untuk mengubah saiz teks

Ambil contoh #1 di atas. Jika lulus

"lebar" bekas adalah saiz yang sama apabila dikurangkan separuh daripada saiz viewport, tetapi kini mengurangkan pengiraan peratusannya sendiri disebabkan oleh perubahan.

@media 或 JavaScript 将 div 宽度切换为 25% 宽度，则同时 font-size 需要在媒体查询中或通过 JavaScript 进行调整，以适应新的计算结果 5vw * .25 = 1.25。这将使文本大小与原始 50%

Cabaran

Gunakan CSS calc() 函数 在使用中，动态调整会变得困难，因为该函数目前无法用于 font-size 目的。因此，如果 calc() 上的宽度发生变化，则无法进行纯 CSS 调整。当然，对边距宽度的微小调整可能不足以保证对 font-size untuk membuat sebarang perubahan, jadi ia mungkin tidak penting.

Answer 2

Pertanyaan Bekas mungkin merupakan pilihan terbaik sekarang, bergantung pada kes penggunaan anda dan disokong oleh semua penyemak imbas utama. Sila semak tahap sokongan di sini: https://caniuse.com/mdn-css_properties_container

Kini mudah dikawal

.module h2 {
  font-size: 1em;
  container-name: sidebar
}

@container sidebar (min-width: 700px) {
  .module h2 {
    font-size: 2em;
  }
}