Responsive H5 Page Design: Converting px to rem and Dynamically Adjusting Root Font Size
This article explains how to create H5 pages that adapt to any screen size by replacing absolute pixel units with relative rem units, adjusting the root font-size via JavaScript, and demonstrates responsive layouts with practical code examples.
Introduction
Different devices have vastly different screen sizes, and designing an H5 page for a single size leads to layout breakage on other devices. The article discusses how to make a page automatically adapt to any screen size, providing a consistent user experience.
From px to rem
px (Pixels) is an absolute unit; its value does not change with parent or root elements. Using px fixes element dimensions, which can cause inconsistent display across devices.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<div>
<div style="height: 100px; width: 100px; background-color: red; display: inline-block;"></div>
<div style="height: 200px; width: 200px; background-color: green; display: inline-block;"></div>
<div style="height: 200px; width: 200px; background-color: green; display: inline-block;"></div>
</div>
</body>
</html>Because px is absolute, the same layout looks different on various screens. To achieve consistent sizing, the article introduces rem (Root em) , a relative unit based on the root element’s font size.
Using rem
rem equals the font size of the <html> element (default 16 px). By setting a custom root font size, developers can control how many pixels each rem represents.
<html lang="en" style="font-size: 75px;">When the root font size changes, all dimensions expressed in rem scale automatically.
Responsive Design with JavaScript
The article shows how to calculate a suitable root font size based on the viewport width, enabling true responsive design.
(function() {
function calc() {
const w = document.documentElement.clientWidth;
console.log(w);
document.documentElement.style.fontSize = 75 * (w / 750) + 'px';
console.log(document.documentElement.style.fontSize);
}
calc();
window.onresize = function() {
console.log('Screen size changed');
calc();
};
})();The script runs on page load, computes the root font-size proportionally to the design width (e.g., 750 px design → 75 px root), and updates it whenever the window is resized, ensuring that rem -based elements keep the same visual proportion on any device.
Practical Example
<!DOCTYPE html>
<html lang="en" style="font-size: 37.5px;">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
* { margin:0; padding:0; }
</style>
</head>
<body>
<div style="width:5rem; height:2rem; background-color:red; display:inline-block;"></div>
<div style="width:5rem; height:2rem; background-color:green; display:inline-block;"></div>
</body>
</html>With a root font size of 37.5 px, 1rem = 37.5px , so the two blocks render at the intended dimensions on an iPhone SE (375 × 667 px).
Conclusion
Using rem instead of px and dynamically adjusting the root font-size with JavaScript provides a flexible, responsive solution that works across diverse screen sizes, eliminating layout inconsistencies caused by fixed pixel units.
Rare Earth Juejin Tech Community
Juejin, a tech community that helps developers grow.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.