zoukankan      html  css  js  c++  java
  • 移动页面缩放方法之(三)rem布局

    <!DOCTYPE HTML>
    <html lang="zh-cn">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
    <title>无标题文档</title>
    <style>
    *{
        padding:0;
        margin:0;    
    }
    body{
        background:#000;    
    }
    div{
        6.4rem;
        height:5rem;
        margin:0 auto;
        line-height:5rem;
        font-size:.3rem;
        text-align:center;
        color:#fff;
        background:red;    
    }
    </style>
    </head>
    
    <body>
    <div>我是测试的</div>
    <script>
    ;!function(top){
        var doc=top.document;
        top.SetSize=function(width){
            this.obj=doc.querySelector('html');
            this.width=width;
            this.fontSize=100;
            this.init().resize();
        };    
        SetSize.prototype={
            init:function(){
                this.scale=this.obj.clientWidth/this.width;
                this.obj.setAttribute("style","font-size:"+(this.scale*this.fontSize)+"px !important");
                return this;    
            },
            resize:function(){
                top.addEventListener('resize',this.init.bind(this),false);    
            }
        };
        SetSize.prototype.constructor=SetSize;
        doc.addEventListener('DOMContentLoaded',function(){
            new SetSize(640);
        },false);
    }(parent);
    </script>
    </body>
    </html>
  • 相关阅读:
    SpringBoot整合Spring Data Elasticsearch
    Elasticsearch(一)基础入门
    二叉排序树
    数据结构之栈
    数据结构之队列
    MySQL主从备份
    Redis主从复制之哨兵模式(sentinel)
    shiro核心
    MySQL常用命令
    Docker常用命令
  • 原文地址:https://www.cnblogs.com/tfbodys/p/5043443.html
Copyright © 2011-2022 走看看