| <!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> |
