Bagaimana untuk mencapai peratusan margin peralihan yang lancar apabila mengubah saiz tetingkap

Question

Saya ingin menetapkan margin peratusan di sekeliling elemen iaitu 5% daripada lebar port pandangan apabila port pandangan lebih kecil dan 15% daripada lebar port pandangan apabila port pandangan lebih besar.

Saya boleh menggunakan pertanyaan media untuk menogol nilai margin seperti ini:

.element {
    margin: 5%;
}

@media (min-width: 800px) {
    .element {
        margin: 15%;
    }
}

Walau bagaimanapun, saya mahukan peralihan yang lancar antara peratusan apabila saiz tetingkap berubah, dan bukannya lompat secara tiba-tiba dari satu nilai ke nilai yang lain.

Saya rasa sesuatu seperti ini mungkin berkesan:

@media (min-width: 800px) {
    .image-grid {
        margin: 1em
            calc(
                (var(--max-margin) - var(--min-margin)) * ((100vw - 800px) / (1920 - 800) +
                    var(--min-margin))
            );
    }
}

Ini seharusnya melicinkan perubahan nilai margin secara teori dengan menetapkan margin sebagai peratusan daripada jumlah perubahan antara margin.

Sebagai contoh, apabila port pandang lebih kecil: min-margin + [margin的变化量] * 0，当视口为中等大小时：min-margin + [margin的变化量] * 0.5，当视口较大时：min-margin + [margin的变化量] * 1

Tetapi itu sebenarnya tidak berfungsi kerana fungsi calc tidak mengembalikan nilai seperti 10px / 20px secara langsung sebagai perpuluhan, seperti 0.5. Sebaliknya, ia mengembalikan 0.5 piksel. Dan 15% * 0.5 piksel adalah tidak munasabah dan akan menyebabkan margin kembali kepada nilai lalai 0.

Mungkin saya tersalah arah. Sebarang bantuan amatlah dihargai.

Answer 1

Ikuti komen saya

• Dalam CSS calc(..) anda perlu memastikan bahawa terma dalam pengiraan anda adalah sah. Berhati-hati dengan pembahagian dan pendaraban!
• Anda mesti sedar bahawa perkara yang sama berlaku untuk menggunakan unit peratusan (%）将产生像素（px）的结果，任何视口大小单位（vh,vw,vmin,vmax) dan unit terbitannya.

Jadi istilah pertama anda (var(--max-margin) - var(--min-margin))将产生像素单位，因为大小的%tukar kepada hasil piksel.

Sejak penggal kedua ((100vw - 800px) / (1920 - 800) + var(--min-margin)) juga menghasilkan nilai dalam unit piksel, anda sedang mendarab piksel dengan piksel.

Kuki tidak boleh didarab dengan kuki.

Bentuk titik-cerun bagi persamaan linear y=mx+badalah sesuai untuk mengira sebarang saiz berbanding saiz port pandangan semasa. Ia seperti melukis garisan pada graf XY, menggunakan koordinat titik rendah dan tinggi sebagai (x1,y1) dan (x2,y2)

.

• titik rendah (atau koordinat) = saiz jidar yang diperlukan pada saiz port pandang rendah = (x1,y1)
• Titik tinggi (atau koordinat) = saiz jidar yang diperlukan pada saiz port pandang tinggi = (x2,y2)

Formula matematik titik-ceruny - y1 = m(x - x1):

• Gunakan rendah (x1,y1) dan tinggi (x2,y2)
• y = y1 + (y2 − y1) / (x2 − x1) × (x − x1)Gunakan persamaan yang digantikan:

Dalam kes anda

5%来计算该大小的边距。我使用了400px的视口宽度，得到0.05 * 400 = 20Untuk titik rendah, kami boleh memilih mana-mana saiz port pandang yang mudah dan menggunakan . Sekarang kita mendapat titik rendah (x1,y1) dengan nilai (400,20)

800px的视口上有15%的边距。由于0.15 * 800 = 120Titik tinggi mudah dicari kerana anda ingin mempunyai lebar yang lebih besar daripada , titik tinggi (x2,y2) akan menjadi (800,120)

pxKami kini hanya memasukkan nilai ke dalam persamaan di atas (dengan transformasi

yang sesuai) dan memudahkan:

• margin = 20 * 1px + (120 - 20) / (800 - 400) * (100vw - 400 * 1px)
• margin = 20px + 100 / 400 * (100vw - 400px)=>
• margin = 20px + 0.25 * (100vw - 400px)=>

5%和15%之间，这将需要使用CSS的clampAnda ingin mengehadkan keputusan akhir kepada fungsi , mendapatkan hasil akhir

:

• clamp(5%, 20px + 0.25 * (100vw - 400px), 15%)

Coretan kod

menunjukkan kesan versi terhad dan tidak terhad (sila buat pelayar skrin penuh dan ubah saiz untuk melihat perbezaan).

Sebenarnya, bentuk pintasan cerun(y = mx + b25vw - 80px) keputusan akhir ialah

. 🎜

/* 点斜式 */
.test1 { margin: 0 clamp(5%, 20px + 0.25 * (100vw - 400px), 15%) }
.test2 { margin: 0 calc(20px + 0.25 * (100vw - 400px)) }

/* 斜截式 */
.test3 { margin: 0 clamp(5%, 25vw - 80px, 15%) }
.test4 { margin: 0 calc(25vw - 80px) }

/* 仅为视觉效果 */
*      { box-sizing: border-box; outline: 1px dashed }
body   { margin: 0; text-align: center }
.test  { background-color: Linen }

<h3>点斜式</h3>
<div class="test test1">限制</div>
<div class="test test2">未限制</div>

<h3>斜截式</h3>
<div class="test test3">限制</div>
<div class="test test4">未限制</div>