A coefficient is the number that multiplies another value. In interface work, it controls how strongly a size, distance, percentage, or transform changes: a scale of 1 leaves an element unchanged, while 1.5 makes it 150% of its original size from the transform origin. section 3.1.3
Coefficients turn a changing input into a visual response. Nested percentage widths multiply through their ancestors, so each percentage acts as a coefficient on the width calculated before it. Keep units and their scales explicit with calc() when combining layout values. section 3.1.3 section 3.1.6
Scale hero text across screen widths
For hero text that is 4rem at 320px wide and 8rem at 1600px wide, the viewport coefficient is 5vw. Use a fixed offset plus that coefficient, then clamp the result: font-size: clamp(4rem, 2rem + 5vw, 8rem). The coefficient supplies responsive growth; clamp() enforces the minimum and maximum. section 8.2.4
Derive a coefficient from a pinch gesture
Measure the distance between two touches, then divide the current distance by the starting distance. That ratio is the scale coefficient: raw = d / startDist. Clamping it to 0.5 through 5 keeps a photo from becoming impractically small or large before applying transform: scale(scale). section 13.1.2
Coefficients commonly appear as:
- A percentage multiplier: value = parent_width × percentage / 100. section 3.1.3
- A viewport-growth rate: 4vw or 5vw in a fluid font-size expression. section 8.2.4 section 8.4
- A distance-based intensity: 1 + distance / maxDistance × 0.05, which grows a hover effect from 1 to 1.05. section 10.2.3
Listing 13.2 Scaling a photo based on pinch and spread gestures
HTML:
<img src="/images/flower.jpg" alt="Flower" class="photo">
JavaScript:
const photo = document.querySelector('.photo');
let startDist = 1;
photo.addEventListener('touchstart', (e) => { #1
if (e.touches.length === 2) { #2
const [a, b] = e.touches; #3
startDist = distance(a.clientX, a.clientY, #4
b.clientX, b.clientY); #4
}
}, { passive: true });
photo.addEventListener('touchmove', (e) => { #5
if (e.touches.length === 2) { #6
const [a, b] = e.touches; #7
const d = distance(a.clientX, a.clientY, #8
b.clientX, b.clientY); #8
const raw = d / startDist; #9
const scale = Math.min(5, Math.max(0.5, raw)); #10
photo.style.transform = `scale(${scale})`; #11
}
}, { passive: true });
Follow the complete touch-event flow from two-point distance measurement to a bounded scale coefficient and CSS transform. section 13.1.2
Choose coefficients from visible constraints rather than guessing. Identify the input range and desired output range, solve for the multiplier, and bound the result when the UI must remain readable or controllable. section 8.2.4 section 13.1.2
