"Convert PX to REM"
Bootstrap 4.1.1 Snippet by SOJITRA

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <h1 class="text-center my-5">Convert PX to REM</h1> <form id="frmData" action="" class="row gy-3"> <!-- Generated form elements will be inserted here --> <div class="col"><label for="original" class="mb-2">Original CSS</label><textarea type="textarea" class="form-control form-control" id="original" placeholder="Original CSS place here" rows="20"></textarea></div> <div class="col-2 align-items-center justify-content-center"> <div class="row g-3"> <div class="col-12 text-center"><label for="pixels" class="mb-2">PX</label><input type="text" class="form-control form-control text-center" id="pixels" pattern="[0-9]" value="16"> </div> <div class="col-12"> <div class="d-flex flex-column"><button class="btn btn-md btn-primary mt-5" type="button">Convert</button><button class="btn btn-md btn-success mt-4" type="button">Copy</button><button class="btn btn-md btn-danger mt-4" type="button">Clear</button></div> </div> </div> </div> <div class="col"><label for="converted" class="mb-2">Converted CSS</label><textarea type="textarea" class="form-control form-control" id="converted" placeholder="Converted CSS will be here, press convert button after placing original CSS" rows="20"></textarea></div> </form> </div>
$(document).ready(function () { $(this).on('submit', function (e) { e.preventDefault(); }); $('#pixels').on('change', function () { var text = $('#original').val(); var value = $(this).val(); var newText = text.replace(/[0-9]+px/g, function (match) { return Math.round( parseInt(match) / value * 1000 ) / 1000 + 'rem'; }); $('#converted').val(newText); }); $('button.btn-primary').on('click', function () { var text = $('#original').val(); var value = $('#pixels').val(); var newText = text.replace(/[0-9]+px/g, function (match) { return Math.round( parseInt(match) / value * 1000 ) / 1000 + 'rem'; }); $('#converted').val(newText); }); $('button.btn-success').on('click', function () { copyToClipboard($('#converted')); }); $('button.btn-danger').on('click', function () { $('#original').val(''); $('#converted').val(''); }); });

Related: See More


Questions / Comments: