最簡單的方式實現rem布局

本文轉載自查看原文 2019-06-12 13:54 2210 css

加上如下js，px轉換成rem需要手動，計算方式：量的大小除以100，就等於rem，例如：量的設計稿元素寬度是120，那么就寫成{width: 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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 rem是如何實現自適應布局的？ rem是如何實現自適應布局的？ vue 實現 rem 布局的或者 vw 布局的方法分享兩個常用的rem布局方式 Flexbox 布局的最簡單表單【Unity3D】UGUI虛擬搖桿，最簡單實現方式。 Unity3D：Progress Bar最簡單的實現方式 JQuery EasyUI 最簡單的左右布局實現及tab的右鍵菜單實現【QT】使用代碼方式實現簡單的界面布局純css實現div三列等高布局的最簡單方法簡化版/也可以多列