TAG
CSS
JavaScript
Result
Run
License
<div class="box"></div>
body::before, body::after { position: fixed; z-index: 1; font-size: 30px; color: #FF0000; } body::before { content: attr(data-width)"px"; top: 0; left: 0; right: 0; text-align: center; border-top: 1px solid #FF0000; } body::after { content: attr(data-height)"px"; top: 0; left: 0; bottom: 0; border-left: 1px solid #FF0000; display: flex; align-items: center; } .box { width: 50vmax; height: 50vmin; background-color: #CCC; position: relative; } .box::before, .box::after { position: absolute; } .box::before { content: attr(data-width) "\A" attr(data-widthhow); top: 10px; left: 0; right: 0; text-align: center; white-space: pre; } .box::after { content: attr(data-height) "\A" attr(data-heighthow); top: 0; left: 10px; bottom: 0; white-space: pre; display: flex; align-items: center; }
window.addEventListener("load", () => { calcViewportSize(); window.addEventListener("resize", calcViewportSize); function calcViewportSize() { const elBody = document.body; const elBox = document.querySelector(".box"); elBody.setAttribute("data-width", innerWidth); elBody.setAttribute("data-height", innerHeight); let applyVmax = (innerWidth > innerHeight) ? innerWidth : innerHeight; let txtWidth = `50vmax(${elBox.getBoundingClientRect().width})`; let txtWidthHow = `${applyVmax}px / 2 = ${applyVmax / 2}`; elBox.setAttribute("data-width", txtWidth); elBox.setAttribute("data-widthhow", txtWidthHow); let applyVmin = (innerWidth > innerHeight) ? innerHeight : innerWidth; let txtHeight = `50vmin(${elBox.getBoundingClientRect().height})`; let txtHeightHow = `${applyVmin}px / 2 = ${applyVmin / 2}`; elBox.setAttribute("data-height", txtHeight); elBox.setAttribute("data-heighthow", txtHeightHow); } });
Console
expand_less
License
License
by DevDic
Close