html响应式布局

biemowomaomao

于 2024-05-18 11:18:19 发布

阅读量159

点赞数 4

文章标签： html 前端

本文链接：https://blog.csdn.net/biemowomaomao/article/details/139022341

版权

/* 响应式布局 */

/* @media not | only 设备类型 [and 设备特性]

设备类型

screen 屏幕

print 打印机

tv 电视设备

projection 投影仪

all 全部设备

设备特征

width 设备宽度 max-width:显示区域的最大宽度 min-width:显示区域的最小宽度

height 设备高度

aspect-ratio 设备的宽高比

resolution 分辨率

例子：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
        .big {
            width: 700px;
            margin: 40px auto;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }
        
        .big div {
            border: 3px solid rgb(123, 123, 23);
            padding: 10px;
            box-sizing: border-box;
            margin: 5px;
            border-radius: 10px;
        }
        
        .big .left {
            width: 400px;
        }
        
        .big .mid {
            width: 280px;
        }
        
        .big .right {
            width: 800px;
        }
        
        @media screen and (max-width:500px) {
            .big {
                width: 450px;
                margin: 40px auto;
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
            }
            .big div {
                border: 3px solid rgb(123, 123, 23);
                padding: 10px;
                box-sizing: border-box;
                margin: 5px;
                border-radius: 10px;
            }
            .big .left {
                width: 300px;
            }
            .big .mid {
                width: 300px;
            }
            .big .right {
                width: 300px;
            }
        }
        
        @media screen and (min-width:1000px) {
            .big {
                width: 1000px;
                margin: 40px auto;
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
            }
            .big div {
                border: 3px solid rgb(123, 123, 23);
                padding: 10px;
                box-sizing: border-box;
                margin: 5px;
                border-radius: 10px;
            }
            .big .left {
                width: 300px;
            }
            .big .mid {
                width: 300px;
            }
            .big .right {
                width: 300px;
            }
        }
    </style>
</head>

<body>
    <div class="big">
        <div class="left">
            <h3>标题1</h3>
            <p>内容1</p>
        </div>
        <div class="mid">
            <h3>标题1</h3>
            <p>内容1</p>
        </div>
        <div class="right">
            <h3>标题1</h3>
            <p>内容1</p>
        </div>
    </div>
</body>

</html>

屏幕宽度在500px以下一个效果，在500-1000px之间一个效果，在1000px以上一个效果

运行效果截图：

biemowomaomao

关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
html响应式布局

width 设备宽度 max-width:显示区域的最大宽度 min-width:显示区域的最小宽度。屏幕宽度在500px以下一个效果，在500-1000px之间一个效果，在1000px以上一个效果。/* @media not | only 设备类型 [and 设备特性]aspect-ratio 设备的宽高比。projection 投影仪。resolution 分辨率。tv 电视设备。all 全部设备。height 设备高度。print 打印机。/* 响应式布局 */
复制链接

扫一扫