响应式布局

Posted 2022-04-20 weigaojie

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了响应式布局相关的知识，希望对你有一定的参考价值。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .box1
        width: 900px;height:200px;float:left;
    
    .box2
        width: 300px;height:200px;float: left;
    
    .son1
        width: 600px;height: 100px;background: green;border:1px solid #000;box-sizing: border-box;float:left;
    
    .son2
        width: 300px;height: 100px;background: gray;border:1px solid #ccc;box-sizing: border-box;float:right;
    
    .son3
        width: 300px;height: 100px;background: gray;border:1px solid #ccc;box-sizing: border-box;float:left;
    
    .son4
        width: 600px;height: 100px;background: green;border:1px solid #000;box-sizing: border-box;float:right;
    
    .con
        width: 300px;height: 50px;border:1px solid #ff6700;box-sizing: border-box;
    
    @media screen and (min-width:300px) 
        .box1
            display: none;
        
    
    @media screen and (min-width:600px) 
        .box1
            display:block;
        
        .box1 .son4
            float: left;
        
        .box2
            display: none;
        
        .box1 .son2
            display: none;
        
        .box1 .son3
            display: none;
        
    
    @media screen and (min-width:900px) 
        .box1
            display:block;
        
        .box1 .son2
            display: block;
        
        .box1 .son3
            display: block;
        
        .box2
            display: none;
        
    
    @media screen and (min-width:1220px) 
        .box1
            display: block;
        
        .box1 .son2
            display: block;
        
        .box1 .son3
            display: block;
        
        .box2
            display: block;
        
    
</style>
<body>
    <div class="box1">
        <div class="son1">1</div>
        <div class="son2">2</div>
        <div class="son3">3</div>
        <div class="son4">4</div>
    </div>
    <div class="box2">
        <div class="con">1</div>
        <div class="con">2</div>
        <div class="con">3</div>
        <div class="con">4</div>
    </div>
</body>
</html>

以上是关于响应式布局的主要内容，如果未能解决你的问题，请参考以下文章

「布局」静态布局、自适应布局、流式布局、响应式布局、弹性布局简析