<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet'>
<label for="zoomSlider">Zoom Level:</label>
<input type="range" id="zoomSlider" min="0.5" max="2" step="0.1" value="1">
<span id="zoomValue">1</span>
<div id="mainWrapper">
<div id="screenInfoW"></div>
<a id="sizeSmall">a</a>
<a id="sizeMed">A</a>
<a id="sizeLarge"><big>A</big></a>
<br>
<img src="https://assets.codepen.io/1712301/IMG_6944.png" alt="" />
<div class="textWrapper">
<div style="border: 1px solid cyan;">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nemo dicta doloremque sunt explicabo laboriosam similique, id beatae itaque tenetur aliquam eaque necessitatibus nulla adipisci cupiditate, incidunt amet dolore impedit hic veritatis? Voluptatem adipisci minima ex id ab praesentium officiis dolores? Modi eius libero ex? Illo non est error? Quasi, repudiandae!
</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odit, ab!</p>
</div>
<div style="border: 1px solid yellow;">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Possimus delectus harum laboriosam modi porro amet sint. Dolorem minus consequuntur, voluptate ullam velit quibusdam perspiciatis voluptatum nihil veritatis nisi laboriosam quisquam harum quae molestiae corporis quasi sunt eveniet, quaerat deserunt. Iure temporibus delectus repudiandae minima tempore dolor, officiis quam sequi! Ipsum mollitia eum doloremque libero soluta quis neque ratione, harum accusamus. Obcaecati laborum error, aspernatur velit, id maiores alias perspiciatis dicta eius voluptatibus ipsam. Excepturi, sint.
</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odit, ab!</p>
</div>
</div>
</div>
body {
background: #444;
color: white;
font-family: "Raleway";
font-size: 14px;
border: 1px solid red;
/* width: fit-content; */
/* width: 1020px; */
}
#mainWrapper {
/* width: fit-content; */
width: 100%;
border: 1px solid lime;
}
p {
margin: 5px;
}
.textWrapper {
margin-top:10px;
display: flex;
align-items: flex-start;
flex-direction: row;
/* flex-wrap: wrap; */
/* width: fit-content; */
/* width: 80%; */
border: 1px solid magenta;
}
document.getElementById("zoomSlider").addEventListener("input", function (e) {
var zoomLevel = e.target.value;
document.getElementById("mainWrapper").style.zoom = zoomLevel;
document.getElementById("zoomValue").textContent = zoomLevel;
});
let minW = 1024 ;
function adjustZoom() {
var screenWidth = window.innerWidth ;
var zoomLevel;
zoomLevel = screenWidth / minW ;
zoomLevel >= 1 ? zoomLevel = 1 : zoomLevel ;
document.getElementById(
"screenInfoW"
).textContent = `screenWidth: ${screenWidth}`;
document.getElementById("mainWrapper").style.zoom = zoomLevel;
document.getElementById("zoomValue").textContent = zoomLevel;
document.getElementById("zoomSlider").value = zoomLevel;
}
// Adjust zoom on window resize
window.addEventListener("resize", adjustZoom);
// Initial zoom adjustment on page load
window.addEventListener("load", adjustZoom);
This Pen doesn't use any external CSS resources.