zoukankan      html  css  js  c++  java
  • 一个牛的自适应(响应式)页面

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            .box{
                width:50px;
                height:50px;
                padding:4px;
                -o-box-sizing:border-box;
                -moz-box-sizing:border-box;
                -webkit-box-sizing:border-box;
                -ms-box-sizing:border-box;
                box-sizing:border-box;
                display:inline-block;
                border:4px solid #fff;
                background-color:#ddd;
            }
            html,body{
                width:100%;
                height:100%;
                padding:0;
                margin:0;
            }
            #container{
                font-size:0;
            }
        </style>
    </head>
    <body>
    <div id="container"></div>
    </body>
    </html>
    <script>
        window.addEventListener('load',function(){
            size();
        });
        function size(){
            var container = document.getElementById('container');
            container.innerHTML = '';
            var x = Math.floor(window.innerWidth/50);
            var y = Math.floor(window.innerHeight/50);
            for(var i = 0; i < x*y; i++){
                var box = document.createElement('div');
                box.className = 'box';
                container.appendChild(box);
            }
        }
        window.addEventListener('resize',function(){
            size();
        });
    </script>

    效果图:

  • 相关阅读:
    初识函数定义与调用 * 和 **
    文件操作
    小程序缓存数据
    调用外部的方法
    小程序订单的待付款实现倒计时(秒)
    小程序上线流程
    微信小程序点击保存图片到相册
    修改头像
    点击保存图片
    小程序的学习王战
  • 原文地址:https://www.cnblogs.com/heyiming/p/6871839.html
Copyright © 2011-2022 走看看