Combined font-size and line-height lock, using pixel-based Media Queries

Developer
Alex Konstantinov
Size
2,815 Kb
Views
38,456
  1. Combined font-size and line-height lock, using pixel-based Media Queries Previews
  2. Combined font-size and line-height lock, using pixel-based Media Queries HTML Codes
  3. Combined font-size and line-height lock, using pixel-based Media Queries CSS Codes
  4. Combined font-size and line-height lock, using pixel-based Media Queries JS Codes

How do I make an combined font-size and line-height lock, using pixel-based media queries?

Combined font-size and line-height lock, using pixel-based Media Queries. What is a combined font-size and line-height lock, using pixel-based media queries? How do you make a combined font-size and line-height lock, using pixel-based media queries? This script and codes were developed by Alex Konstantinov on 08 September 2022, Thursday.

Combined font-size and line-height lock, using pixel-based Media Queries Previews
IQ Test

Combined font-size and line-height lock, using pixel-based Media Queries - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Combined font-size and line-height lock, using pixel-based Media Queries</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1> Combined font-size and line-height lock, using pixel-based Media Queries
</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, aliquam amet autem beatae eius est excepturi exercitationem expedita facere illo minus necessitatibus nobis odio odit possimus quasi repellendus, repudiandae sint!</p>
<p>Ab aliquam at blanditiis cum delectus eaque ex fuga, fugit hic, illo impedit laborum natus nesciunt nisi nostrum placeat ratione rerum sequi similique sit? A corporis debitis delectus deserunt ea eos harum libero maiores necessitatibus nemo nobis odio omnis, placeat quasi, rerum sunt voluptatem! Dignissimos enim, facilis illo itaque nemo tempore. Adipisci, eos, illum.</p>
<p>Dicta facere illo ipsam laudantium nisi quo reprehenderit. Accusantium assumenda consequuntur debitis dolorum ea exercitationem, facilis harum incidunt labore laudantium molestias nihil numquam qui soluta ullam, vel, veritatis vitae voluptates.</p> <script src="js/index.js"></script>
</body>
</html>

Combined font-size and line-height lock, using pixel-based Media Queries - Script Codes CSS Codes

 h1 { font-size: 1.5rem; /* Increment: (1.3333 - 1.2) × 24px = 3.2px */ line-height: calc( 120% + 3.2px ); } p { font-size: .9375rem; line-height: 150%; } @media (min-width: 320px) { h1 { font-size: calc( 1.5rem + 2.5vw - 8px ); /* from 120% + 3.2px to 120% + 0px */ line-height: calc( 120% - .5vw + 4.8px ) } p { font-size: calc( .9375rem + .46875vw - 1.5px ); /* from 150% + 0px to 150% + 4.5px */ line-height: calc( 150% + .7031vw - 2.25px ); } } @media (min-width: 960px) { h1 { font-size: calc(1.5rem + 16px); /* Base value, no increment needed. */ line-height: 120%; } p { font-size: calc( .9375rem + 3px ); /* Increment: (1.75 - 1.5) × 18px = 4.5px */ line-height: calc( 150% + 4.5px ); } } /* Show the computed line-height (as a ratio) */ [data-info]::after { content: attr(data-info); display: block; color: gray; } /* Cosmetic styles */ body { max-width: 600px; width: calc( 100px + 50vw ); margin: 60px auto; padding: 0 20px; font-family: Helvetica Neue, Arial, sans-serif; } h1 { margin: 1.25em 0; }

Combined font-size and line-height lock, using pixel-based Media Queries - Script Codes JS Codes

var paragraphs = document.querySelectorAll('h1, p'); function updateInfo() { Array.prototype.forEach.call(paragraphs, function (p) { var styles = getComputedStyle(p); var lh = parseFloat(styles.lineHeight.replace('px', '')); var fs = parseFloat(styles.fontSize.replace('px', '')); var ratio = Math.round((lh / fs) * 100) / 100; var roundedFs = Math.round(fs * 100) / 100; p.setAttribute('data-info', roundedFs + 'px / ' + ratio); }); } window.addEventListener('resize', updateInfo); updateInfo();
Combined font-size and line-height lock, using pixel-based Media Queries - Script Codes
Combined font-size and line-height lock, using pixel-based Media Queries - Script Codes
Home Page Home
Developer Alex Konstantinov
Username oxla
Uploaded September 08, 2022
Rating 4.5
Size 2,815 Kb
Views 38,456
Do you need developer help for Combined font-size and line-height lock, using pixel-based Media Queries?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Alex Konstantinov (oxla) Script Codes
Name
Flex center
Loader wave
Size window
Web Launch Checklist
Svg
Loader
Cube Rotating Around
Loader spiner
Iphone 5
Drag resize rotate
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!