zoukankan html css js c++ java

页面内容如何随窗口（宽度）的改变而改变大小？

效果图：

图一：

图二：

代码：<!DOCTYPE html<html lang="en"><head>

    <meta charset="UTF-8">
    <title></title>
    <link type="text/css" rel="stylesheet" href=" "/>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
　　　　 }
        #float{
            width: 2rem;
            height: 2rem;
            border: 0.01rem solid black;
        }
        #float div{
            width: 0.4rem;
            height: 0.4rem;
            float: left;
        }
        #float .one{
            background-color: blue;
        }
        #float .two{
            background-color: green;
        }
        #float .three{
            background-color: red;
        }
        #float .four{
            background-color: yellow;
        }
    </style>
</head>
<body>
<div id="float">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
</div>
<script type="text/javascript">
    window.onload = function () {
        // 获取浏览器页面最大宽度
        var maxWidth = document.documentElement.offsetWidth
        document.documentElement.style.fontSize = document.documentElement.offsetWidth/(maxWidth/100) + 'px';
        window.onresize = function(){
            document.documentElement.style.fontSize = document.documentElement.offsetWidth/(maxWidth/100) + 'px';
        }
    }
</script>
</body>
</html>

查看全文

相关阅读:
反反爬 | 如何巧过 CloudFlare 5秒盾？
Xpath高级用法
 GZIP 头解析
 学习S5
Chrome 建立SOCKS5代理
 建立IP6隧道
 linux 配置Socks51
linux 配置Socks5
最近买了一个域名哈哈，棒棒哒~~
jquery 动态添加下拉框需要增加煊染 selectmenu("refresh");

原文地址：https://www.cnblogs.com/FlyingLiao/p/11577926.html