缩放浏览器窗口的时候，导致原来的布局样式错乱了？

wc123x

171

发布于
2017-08-31

✓ 已被采纳

缩放时边框宽度会按比例缩放，可能会使总宽超出。如果是背景色就不会出现这种问题。可以看一下双列布局。http://nec.netease.com/librar...

浪子心声

发布于
2017-08-31

新手上路，请多包涵

可以用js获取屏幕宽度，html根标签字体大小设置为屏幕宽，布局用rem单位

j小白j

576

发布于
2017-08-31

如果有这个需求的话，建议使用百分比布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        div{
            width:50%;
            height:300px;
            float:left;
            text-align: center;
            color:#fff;
            font-size:24px;
            line-height: 300px;
        }
    </style>
</head>
<body>
    <div style="background:red">放块1</div>
    <div style="background:blue">方块2</div>
</body>
</html>

图片描述

雷霆科技网络

发布于
2017-08-31

新手上路，请多包涵

建议使用flexbox来布局，例如

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title></title>
        <style>
            *{margin:0 auto;padding:0 auto;}
            .container {width:1200px;display: flex; flex-flow: row wrap;}
            .main {border:1px solid orangered;flex: 5;}
            .left {border:1px solid crimson;flex: 4;}
            .right {border:1px solid mediumvioletred;flex: 3;}
        </style>
    </head>
    <body>
        <div class="container">
            <nav class="nav left">…</nav> 
            <section class="main">
                …
            </section> 
            <nav class="nav right">…</nav>
        </div>
    </body>
</html>

立早十二

122

发布于
2017-08-31

更新于
2017-08-31

理解错误了，处理缩放可以用百分比布局，比如这样：

.left{
    width: 49%;
    float: left; 
    border: 1px solid #ccc;
}
.right{
    width: 49%;
    float: right; 
    border: 1px solid #ccc;
}

缩放浏览器窗口的时候，导致原来的布局样式错乱了？

你尚未登录，登录后可以

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

css布局怎么保证右边一直在可视范围内？

图片沿着圆环的转动有什么方法吗？

flex相关 flex: 1的子元素如何宽度能100%且不溢出？

CSS如何巧妙实现标题居中、关闭按钮居右效果？

如何处理 CSS calc() 函数中的单位不一致问题？

js阻止冒泡问题？