【CSS】利用宽高比例的媒体查询

Rand Tsui

于 2019-07-24 12:12:43 发布

阅读量1.2k

点赞数

分类专栏： web前端

本博客所有公开的原创博文皆允许转载，无须再征求作者本人（也就是我）同意

本文链接：https://blog.csdn.net/for_cxc/article/details/97118373

版权

web前端专栏收录该内容

85 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .a {
            height: 20px;
            background-color: #4f7197;
        }
        @media screen and (max-aspect-ratio: 16/10){
            .a {
                height: 50px;
            }
        }
        @media screen and (max-aspect-ratio: 4/3){
            .a {
                height: 100px;
            }
        }
    </style>
</head>
<body>
<div class="a"></div>
</body>
</html>