时间戳

首页 > 解决方案 > 如何基于父元素应用 CSS 样式，类似于媒体查询

html - 如何基于父元素应用 CSS 样式，类似于媒体查询

问题描述

我想创建一个页面来测试我的应用程序中页面的响应式布局，但是媒体查询仅适用于窗口分辨率，有没有办法在更改父元素的宽度时应用 CSS。

例如：

<html>
<head>
<style>
    .child-element{font-size: 30px};

    @media screen and (max-width:768px) {
        .child-element{font-size: 24px}
    }
</style>
</head>
<body>
<div class="parent-element">
    <div class="child-element">Heading 1</div>
</div>
</body>
</html>

现在我想根据父元素的宽度来设置子元素的样式，如果父元素的宽度小于或等于 768px，那么我在媒体查询中编写的类似样式应该适用。

标签： htmlcss

解决方案

推荐阅读