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>
  • 相关阅读:
    实习项目1.
    try catch finally的用法
    asp.net 验证控件
    数据库操作语言
    webform Response的一些成员
    jQuery
    C#@的用法
    SQL分页查询
    抽象类与接口的区别
    抽象类与接口
  • 原文地址:https://www.cnblogs.com/zph666/p/11009200.html
Copyright © 2011-2022 走看看