zoukankan      html  css  js  c++  java
  • 移动端rem的使用

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <!-- <link rel="stylesheet" href="../css/reset-min.css"/> -->
        <script>
            window.onload = function(){
                getRem(750,100)
            };
            window.onresize = function(){
                getRem(750,100)
            };
            function getRem(pwidth,prem){
                var html = document.getElementsByTagName("html")[0];
                var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
                html.style.fontSize = oWidth/pwidth*prem + "px";
            }
            /*
            //小米官网的写法
            !function(n){
                var  e=n.document,
                     t=e.documentElement,
                     i=720,
                     d=i/100,
                     o="orientationchange"in n?"orientationchange":"resize",
                     a=function(){
                         var n=t.clientWidth||320;n>720&&(n=720);
                         t.style.fontSize=n/d+"px"
                     };
                     e.addEventListener&&(n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1))
            }(window);*/
        </script>
        <style>
            * {
                padding: 0;
                margin: 0;
            }
            .wrap{position:absolute;top:0;left:0;bottom:0;right:0;background:#fefefe;}
            .title{width:100%;height:0.98rem;line-height:0.98rem;color:#fff;background:#e02222;text-align: center;font-size:0.32rem;}
        </style>
    </head>
    <body>
        <div class="wrap">
            <div class="title">首页</div>
        </div>
    </body>
    
    </html>
  • 相关阅读:
    leetcode 11. 盛最多水的容器
    gluoncv 导入方式
    python import
    leetcode 55.跳跃游戏
    leetcode 31. 下一个排列
    gluoncv 下载预训练模型速度太慢
    gluoncv voc_detection
    shuf 按行打乱文本命令
    __call__
    @property 装饰器
  • 原文地址:https://www.cnblogs.com/bao2333/p/11546804.html
Copyright © 2011-2022 走看看