html5中图片定位问题

img

img


这个图片咋让它随窗口大小改变呀，为什么笔记本和台式电脑的浏览器打开的排版会错位

图1和图2能看到明显差异
可能是最外层的容器元素设置了固定像素(width: 1000px)
考虑到要适配不同屏幕大小，那么外层布局框架需要将设置为百分比形式(width: 100%)
写了个示例可以参考下，应该会对你有所帮助

img

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        *{margin:0;padding:0;}
        html,body{
            width: 100%;
            height: 100%;
            font-size: 14px;
        }
        .main-outer{
            width: 100%;
            height: 100%;
            background: #f8f8f8;
        }
        .content{
            width: 70%;
            height: 100%;
            margin: 0 auto;
            background: #f2ffc0;
        }
        .nav{
            display: flex;
        }
        .nav>div{
            height: 200px;
            border: 2px solid #ff9494;
        }
        .nav>div:nth-child(1){
            width: 30%;
        }
        .nav>div:nth-child(2){
            flex: 1;
        }
        .row{
            height: 100px;
        }
    </style>
</head>
<body>
    <!-- 最外层背景 -->
    <div class="main-outer">
        <!-- 内容区 -->
        <div class="content">
            <!-- 导航栏 -->
            <div class="nav">
                <div>菜单1</div>
                <div>菜单2</div>
            </div>
            <div class="row">内容</div>
            <div class="row">内容</div>
        </div>
    </div>
</body>
</html>

采用定位，或者display：block，大小采用百分比，限制宽，高自动