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" />
        <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";
            }
        </script>
        <style>
            .wrap{position:relative;top:0;left:0;bottom:0;right:0;background:#fefefe;}
            .title{100%;height:0.98rem;line-height:0.98rem;color:#fff;background:#e02222;text-align: center;font-size:0.32rem;}
            .box{
                 100%;
                height: 0.50rem;
                background: #000;
                font-size: 0.24rem;
                color: #fff;
                line-height: 0.50rem;
                text-align: center;
            }
            .box1{
                 30%;
                height:5rem;
                background: blue;
                font-size: 0.24rem;
                color: #fff;
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <div class="title">首页</div>
        </div>
       <div class="box">
           王胜利
       </div>
       <div class="box1">
           王胜利
       </div>
    </body>
    </html>
  • 相关阅读:
    linux学习记录-----vsftpd服务安装配置
    PTA数据结构第一次作业
    第十一次作业
    第十次作业
    第九次作业
    第八次作业
    第七次作业
    第六次作业
    第五次作业
    第四次作业
  • 原文地址:https://www.cnblogs.com/wangshengli520/p/10194354.html
Copyright © 2011-2022 走看看