CSS（响应式布局）笔记 14

不修×蝙蝠

于 2024-08-29 17:39:36 发布

阅读量184

点赞数 6

文章标签： css 笔记前端 html

本文链接：https://blog.csdn.net/m0_74977981/article/details/141684377

版权

@media [not|only] 设备名称and设备特性{}

1. 设备类型：

①screen 计算机屏幕

② tv 电视

③projection 投影仪

④ all 全部设备

2. 设备特性：

①width 设备宽度

②min-width 最小宽度

③max-width 最大宽度

④height 设备高度

⑤resolution 分辨率

⑥aspect-ratio 设备宽高比

3.e.g

<!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>
            *{
                margin: 0;
                padding: 0;
            }
        
            .c{
                width:750px;
                margin: 50px auto;
                background: aquamarine;
            }
            .c div{
                border:4px solid rgb(225, 58, 114);
                margin: 10px;
                border-radius: 20px;
                
            }

            .c .t1{
                float: left;
                width: 385px;
                height: 300px;
            }
            .c .t2{
                float: left;
                width: 300px;
                height: 300px;
            }
            .c .t3{
                float: left;
                width: 750px;
                height: 300px;
            }
        
            @media screen and (max-width:1000px){
                /* 在宽度<1000px的区间内，执行以下样式 */
                .c{
                width:150px;
                margin: 50px auto;
                background: aquamarine;
            }
            .c div{
                border:4px solid rgb(225, 58, 114);
                margin: 10px;
                border-radius: 100px;
                
            }

            .c .t1{
                float: left;
                width: 150px;
                height: 100px;
            }
            .c .t2{
                float: left;
                width: 150px;
                height: 250px;
            }
            .c .t3{
                float: left;
                width: 150px;
                height: 250px;
            }
            }
 
    </style>
</head>
<body>
   <div class="c">
    <div class="t1">
        <h1>one</h1>

    </div>
    <div class="t2">
        <h1>two</h1>

    </div>
    <div class="t3">
        <h1>three</h1>

    </div>
   </div>


</body>
</html>

不修×蝙蝠

关注

6
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS（响应式布局）笔记 14

media [not|only] 设备名称and设备特性{}⑥aspect-ratio 设备宽高比。②min-width 最小宽度。③max-width 最大宽度。⑤resolution 分辨率。③projection 投影仪。①screen 计算机屏幕。④height 设备高度。①width 设备宽度。④ all 全部设备。
复制链接

扫一扫