<div id="root"></div>
body {
margin: 0;
background-color: #171b21;
font-family: "Roboto Mono", monospace;
}
.header {
display: flex;
justify-content: center;
align-items: center;
background-color: #ffdd40;
padding: 8px;
position: sticky;
top: 0;
* {
margin: 0;
}
h1 {
font-size: 20px;
}
span {
margin-left: 16px;
}
input {
width: 64px;
}
label,
input {
font-size: 16px;
margin-left: 16px;
}
}
article {
margin: 0 auto;
color: #e8e9eb;
img {
display: block;
width: 60%;
margin: 1rem auto;
}
blockquote {
border: 1px solid gray;
border-radius: 4px;
padding: 0 8px;
margin: 0 auto;
width: 60%;
p {
font-style: italic;
font-size: 0.6em;
}
}
}
View Compiled
function clampBuilder(minWidthPx, maxWidthPx, minFontSize, maxFontSize) {
const root = document.querySelector("html");
const pixelsPerRem = Number(getComputedStyle(root).fontSize.slice(0, -2));
const minWidth = minWidthPx / pixelsPerRem;
const maxWidth = maxWidthPx / pixelsPerRem;
const slope = (maxFontSize - minFontSize) / (maxWidth - minWidth);
const yAxisIntersection = -minWidth * slope + minFontSize;
return `clamp(${minFontSize}rem, ${yAxisIntersection}rem + ${
slope * 100
}vw, ${maxFontSize}rem)`;
}
function calculateCh(element, fontSize) {
const zero = document.createElement("span");
zero.innerText = "0";
zero.style.position = "absolute";
zero.style.fontSize = fontSize;
element.appendChild(zero);
const chPixels = zero.getBoundingClientRect().width;
element.removeChild(zero);
return chPixels;
}
const initialRootFontSize = Number(
getComputedStyle(document.querySelector("html")).fontSize.slice(0, -2)
);
function Header({ rootFontSize, setRootFontSize }) {
const [viewportWidth, setViewportWidth] = React.useState(innerWidth);
React.useEffect(() => {
addEventListener("resize", () => setViewportWidth(innerWidth));
}, []);
const rootFontSizeHandler = (e) => {
setRootFontSize(e.target.value);
document.querySelector("html").style.fontSize = `${e.target.value}px`;
};
return (
<div className="header">
<h1>Viewport width: {viewportWidth}px</h1>
<span>|</span>
<label htmlFor="root-font-size">Root font size (px):</label>
<input
id="root-font-size"
type="number"
value={rootFontSize}
min={12}
max={20}
onChange={rootFontSizeHandler}
/>
</div>
);
}
function App() {
const [rootFontSize, setRootFontSize] = React.useState(initialRootFontSize);
const articleRef = React.useRef();
React.useEffect(() => {
articleRef.current.style.fontSize = clampBuilder(320, 960, 0.7, 2.1);
articleRef.current.style.width = `${
(320 / calculateCh(articleRef.current, "0.7rem")) * 0.8
}ch`;
}, [rootFontSize]);
return (
<div>
<Header {...{ rootFontSize, setRootFontSize }} />
<article ref={articleRef}>
<img src="https://studio.uxpincdn.com/studio/wp-content/uploads/2015/10/responsive-web-design.png" />
<h1>Responsive design</h1>
<p>
In the early days of web design, pages were built to target a
particular screen size. If the user had a larger or smaller screen
than the designer expected, results ranged from unwanted scrollbars to
overly long line lengths, and poor use of space.
</p>
<p>
As more diverse screen sizes became available, the concept of
responsive web design (RWD) appeared, a set of practices that allows
web pages to alter their layout and appearance to suit different
screen widths, resolutions, etc. It is an idea that changed the way we
design for a multi-device web, and in this article, we'll help you
understand the main techniques you need to know to master it.
</p>
<h1>Diversity of devices</h1>
<blockquote>
<p>
Day by day the number of devices, platforms that need to work with
your site grows. Responsive web design presents a fundamental shift
in how we will build websites for the decades to come.
</p>
<p>— Jeffrey Veen</p>
</blockquote>
<p>
The display resolution or display modes of a digital television,
computer monitor or display device is the number of distinct pixels in
each dimension that can be displayed. It can be an ambiguous term
especially as the displayed resolution is controlled by different
factors in cathode ray tube (CRT) displays, flat-panel displays
(including liquid-crystal displays) and projection displays using
fixed picture-element (pixel) arrays.
</p>
<p>
It is usually quoted as width × height, with the units in pixels: for
example, 1024 × 768 means the width is 1024 pixels and the height is
768 pixels. This example would normally be spoken as "ten twenty-four
by seven sixty-eight" or "ten twenty-four by seven six eight" (in
American English; in British English, usually "one oh two four by
seven six eight").
</p>
</article>
</div>
);
}
ReactDOM.render(<App />, document.getElementById("root"));
View Compiled
This Pen doesn't use any external CSS resources.