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.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Ikuti komen saya
calc(..)anda perlu memastikan bahawa terma dalam pengiraan anda adalah sah. Berhati-hati dengan pembahagian dan pendaraban!%）将产生像素（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)
.Formula matematik titik-cerun
y - y1 = m(x - x1):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)
yang sesuai) dan memudahkan:pxKami kini hanya memasukkan nilai ke dalam persamaan di atas (dengan transformasimargin = 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 akhirclamp(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 + b
. 🎜25vw - 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 }