zoukankan      html  css  js  c++  java
  • 最简单的方式实现rem布局

    加上如下js,px转换成rem需要手动,计算方式:量的大小除以100,就等于rem,例如:量的设计稿元素宽度是120,那么就写成{ 1.2rem},这样写有什么问题,待研究,也欢迎补充

    <!DOCTYPE html>
    <html lang="en" style="font-size:100px">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script>
            function resetFontSize() {
                var baseFontSize = 100
                var designWidth = 750
                var width = window.innerWidth
                var currentFontSize = (width / designWidth) * baseFontSize
                document.getElementsByTagName('html')[0].style.fontSize = currentFontSize + 'px'
            }
            window.onresize = function () {
                resetFontSize()
            };
            resetFontSize()
        </script>
        <style>
            *{
                padding:0;
                margin:0;
            }
            body{
                overflow: auto;
                font-size: .28rem;
            }
            .box{
                width:7.5rem;
                height: 1rem;
                background: #000;
            }
        
        </style>
    </head>
    <body>
        <div class="box"></div>
        <p>42341</p>
    
    
    </body>
    </html>
  • 相关阅读:
    443. String Compression
    506. Relative Ranks
    825. Friends Of Appropriate Ages
    447. Number of Boomerangs
    54. Spiral Matrix
    744. Find Smallest Letter Greater Than Target
    HDU-1565 方格取数(1)
    zoj 3672 Gao The Sequence
    ZOJ 3675 Trim the Nails
    poj -2955 Brackets
  • 原文地址:https://www.cnblogs.com/zph666/p/11009200.html
Copyright © 2011-2022 走看看