38 lines
1.9 KiB
HTML
38 lines
1.9 KiB
HTML
<!DOCTYPE>
|
|
<html>
|
|
<style>
|
|
#element-container-vw {
|
|
background:green;
|
|
}
|
|
</style>
|
|
<div id="element-container-vw">TEST PASSED</div>
|
|
<script>
|
|
function applyStyle() {
|
|
var viewportWidth = window.innerWidth;
|
|
var elementStyle = document.getElementById("element-container-vw").style;
|
|
elementStyle.height = Math.floor(30 * viewportWidth / 100) + "px";
|
|
elementStyle.width = Math.floor(30 * viewportWidth / 100) + "px";
|
|
elementStyle.fontSize = Math.floor(3 * viewportWidth / 100) + "px";
|
|
elementStyle.lineHeight = Math.floor(3 * viewportWidth / 100) + "px";
|
|
elementStyle.textIndent = Math.floor(2 * viewportWidth / 100) + "px";
|
|
elementStyle.marginLeft = Math.floor(2 * viewportWidth / 100) + "px";
|
|
elementStyle.marginRight = Math.floor(2 * viewportWidth / 100) + "px";
|
|
elementStyle.marginTop = Math.floor(2 * viewportWidth / 100) + "px";
|
|
elementStyle.marginBottom = Math.floor(2 * viewportWidth / 100) + "px";
|
|
elementStyle.borderTopLeftRadius = Math.floor(1 * viewportWidth / 100) + "px";
|
|
elementStyle.borderTopRightRadius = Math.floor(1 * viewportWidth / 100) + "px";
|
|
elementStyle.borderBottomLeftRadius = Math.floor(1 * viewportWidth / 100) + "px";
|
|
elementStyle.borderBottomRightRadius = Math.floor(1 * viewportWidth / 100) + "px";
|
|
elementStyle.paddingLeft = Math.floor(2 * viewportWidth / 100) + "px";
|
|
elementStyle.paddingRight = Math.floor(2 * viewportWidth / 100) + "px";
|
|
elementStyle.paddingTop = Math.floor(2 * viewportWidth / 100) + "px";
|
|
elementStyle.paddingBottom = Math.floor(2 * viewportWidth / 100) + "px";
|
|
elementStyle.minHeight = Math.floor(10 * viewportWidth / 100) + "px";
|
|
elementStyle.minWidth = Math.floor(10 * viewportWidth / 100) + "px";
|
|
elementStyle.maxHeight = Math.floor(60 * viewportWidth / 100) + "px";
|
|
elementStyle.maxWidth = Math.floor(60 * viewportWidth / 100) + "px";
|
|
}
|
|
applyStyle();
|
|
</script>
|
|
</html>
|