Web tipografia orrien diseinuan elementu garrantzitsuenetako bat da, eta neurketa-unitateek nola funtzionatzen duten ulertzea funtsezkoa da diseinu sentikorra eta moldagarria lortzeko . Web garatzaileek egiten duten eraldaketa ohikoenetako bat pixeletatik emetara joatea da. Artikulu honetan, bihurketa honen formula eta HTML formularioa eta JavaScript erabiliz nola inplementatu aztertuko dugu.
Zer dira pixelak eta EM?
Pixelak web diseinuan erabiltzen den neurri-unitate finko bat dira, eta ems, berriz, elementu nagusiaren letra-tamainaren araberako neurri erlatiboa dira . Horrek esan nahi du em batek tamaina alda dezakeela letra-tipoaren ezarpenak aldatzen badira, diseinu sentikorretarako aproposa bihurtuz.
Pixelak EM bihurtzeko formula
Pixelak em bihurtzeko formula nahiko erraza da:
em = pixel / oinarrizko letra-tamaina
Oro har, oinarrizko letra-tamaina 16 pixelekoa da, nahiz eta proiektu desberdinetan alda daitekeen.
Adibide praktikoa
Demagun 32 pixel bihurtu nahi ditugula. Bihurketa hau izango litzateke:
em = 32 / 16 = 2em Oso teknika erabilgarria da diseinu malgua lortzeko.
Ezarpena
Sartu pixelak em-en balioa lortzeko:
HTML eta Javascript formularioaren adibide-kodea
<div class="mb-4">
<form id="conversionForm" onsubmit="return convertPixelsToEm()">
<div class="btn-group mb-3" role="group" aria-label="Basic example">
<input type="number" class="form-control" id="pixels" value="16" required="">
<input type="submit" class="btn btn-primary" value="Convertir">
</div>
<div id="result" class="fw-bold"></div>
</form>
</div>
<script>
function convertPixelsToEm() {
var pixels = document.getElementById('pixels').value;
var baseSize = 16;
var em = pixels / baseSize;
document.getElementById('result').innerHTML = pixels + ' píxeles son ' + em + ' em';
return false; // Evitar el envío del formulario
}
</script>
Unitateen bihurketa ezinbestekoa da webgune baten egitura eta aurkezpena mantentzeko, batez ere gailu mugikorretan. Pixelen ordez em erabiliz, zure diseinua malguagoa eta pantaila-tamaina desberdinetara moldagarria bihurtzen duzu. Gogoratu formula eta teknika hauek nola aplikatu ulertzeak webgune irisgarriagoa eta ikusmen erakargarriagoa eraikitzeko aukera emango dizula.
Comentar: