| Server IP : 195.179.238.23 / Your IP : 216.73.216.138 Web Server : LiteSpeed System : Linux us-imm-web1061.main-hosting.eu 4.18.0-553.109.1.lve.el8.x86_64 #1 SMP Thu Mar 5 20:23:46 UTC 2026 x86_64 User : u629643714 ( 629643714) PHP Version : 8.2.33 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : /home/u629643714/domains/abboshon.com/public_html/tools/ |
Upload File : |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Responsive Unit Converter</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="page-shell">
<header class="hero">
<div class="hero-copy">
<span class="eyebrow">Figma to build helper</span>
<h1>Responsive Unit Converter</h1>
<p>
Enter your site font size, design frame size, and any pixel value.
This tool converts it into <strong>rem</strong>, <strong>em</strong>,
<strong>vw</strong>, <strong>vh</strong>, and <strong>percent</strong> using real formulas.
</p>
</div>
<div class="hero-card glass">
<div class="hero-stat">
<span class="stat-label">Best for type</span>
<strong>rem</strong>
</div>
<div class="hero-stat">
<span class="stat-label">Best for horizontal scaling</span>
<strong>vw / %</strong>
</div>
<div class="hero-stat">
<span class="stat-label">Best for parent-based sizing</span>
<strong>em</strong>
</div>
</div>
</header>
<main class="layout">
<section class="panel glass inputs-panel">
<div class="panel-head">
<h2>Inputs</h2>
<button id="resetBtn" class="ghost-btn" type="button">Reset</button>
</div>
<div class="input-grid">
<label class="field">
<span>Pixel value to convert</span>
<div class="input-wrap">
<input id="pixelValue" type="number" min="0" step="0.01" value="32" />
<span class="suffix">px</span>
</div>
</label>
<label class="field">
<span>Root font size</span>
<div class="input-wrap">
<input id="rootFontSize" type="number" min="0.01" step="0.01" value="16" />
<span class="suffix">px</span>
</div>
</label>
<label class="field">
<span>Parent font size (for em)</span>
<div class="input-wrap">
<input id="parentFontSize" type="number" min="0.01" step="0.01" value="16" />
<span class="suffix">px</span>
</div>
</label>
<label class="field">
<span>Design width</span>
<div class="input-wrap">
<input id="designWidth" type="number" min="0.01" step="0.01" value="1440" />
<span class="suffix">px</span>
</div>
</label>
<label class="field">
<span>Design height</span>
<div class="input-wrap">
<input id="designHeight" type="number" min="0.01" step="0.01" value="1024" />
<span class="suffix">px</span>
</div>
</label>
<label class="field">
<span>Container width (for % width)</span>
<div class="input-wrap">
<input id="containerWidth" type="number" min="0.01" step="0.01" value="1200" />
<span class="suffix">px</span>
</div>
</label>
<label class="field">
<span>Container height (for % height)</span>
<div class="input-wrap">
<input id="containerHeight" type="number" min="0.01" step="0.01" value="800" />
<span class="suffix">px</span>
</div>
</label>
<label class="field full-span">
<span>Use case</span>
<select id="useCase">
<option value="auto">Auto suggestion</option>
<option value="typography">Typography</option>
<option value="spacing">Spacing / margins / padding</option>
<option value="width">Width / layout</option>
<option value="height">Height / vertical layout</option>
</select>
</label>
</div>
</section>
<section class="panel glass results-panel">
<div class="panel-head">
<h2>Converted values</h2>
<span class="live-pill">Live</span>
</div>
<div class="results-grid" id="resultsGrid">
<article class="result-card accent-blue">
<div>
<p class="result-label">rem</p>
<h3 id="remValue">0rem</h3>
</div>
<button class="copy-btn" data-copy-target="remValue">Copy</button>
</article>
<article class="result-card accent-purple">
<div>
<p class="result-label">em</p>
<h3 id="emValue">0em</h3>
</div>
<button class="copy-btn" data-copy-target="emValue">Copy</button>
</article>
<article class="result-card accent-cyan">
<div>
<p class="result-label">vw</p>
<h3 id="vwValue">0vw</h3>
</div>
<button class="copy-btn" data-copy-target="vwValue">Copy</button>
</article>
<article class="result-card accent-teal">
<div>
<p class="result-label">vh</p>
<h3 id="vhValue">0vh</h3>
</div>
<button class="copy-btn" data-copy-target="vhValue">Copy</button>
</article>
<article class="result-card accent-gold">
<div>
<p class="result-label">% of viewport width</p>
<h3 id="viewportWidthPercentValue">0%</h3>
</div>
<button class="copy-btn" data-copy-target="viewportWidthPercentValue">Copy</button>
</article>
<article class="result-card accent-pink">
<div>
<p class="result-label">% of viewport height</p>
<h3 id="viewportHeightPercentValue">0%</h3>
</div>
<button class="copy-btn" data-copy-target="viewportHeightPercentValue">Copy</button>
</article>
<article class="result-card accent-green">
<div>
<p class="result-label">% of container width</p>
<h3 id="containerWidthPercentValue">0%</h3>
</div>
<button class="copy-btn" data-copy-target="containerWidthPercentValue">Copy</button>
</article>
<article class="result-card accent-orange">
<div>
<p class="result-label">% of container height</p>
<h3 id="containerHeightPercentValue">0%</h3>
</div>
<button class="copy-btn" data-copy-target="containerHeightPercentValue">Copy</button>
</article>
</div>
<div class="helper-grid">
<section class="sub-panel">
<div class="sub-head">
<h3>Suggested CSS</h3>
<button class="ghost-btn small" id="copyCssBtn" type="button">Copy all</button>
</div>
<pre id="cssOutput" class="code-block"></pre>
</section>
<section class="sub-panel">
<div class="sub-head">
<h3>Recommendation</h3>
</div>
<div id="recommendationBox" class="recommendation"></div>
</section>
</div>
</section>
</main>
<section class="panel glass formulas-panel">
<div class="panel-head formulas-head">
<h2>How it calculates</h2>
<span class="muted-note">These formulas update from your inputs.</span>
</div>
<div class="formula-grid">
<article class="formula-card">
<h3>rem</h3>
<p id="remFormula"></p>
</article>
<article class="formula-card">
<h3>em</h3>
<p id="emFormula"></p>
</article>
<article class="formula-card">
<h3>vw</h3>
<p id="vwFormula"></p>
</article>
<article class="formula-card">
<h3>vh</h3>
<p id="vhFormula"></p>
</article>
<article class="formula-card">
<h3>% width</h3>
<p id="percentWidthFormula"></p>
</article>
<article class="formula-card">
<h3>% height</h3>
<p id="percentHeightFormula"></p>
</article>
</div>
</section>
</div>
<script src="script.js"></script>
</body>
</html>