时间戳

首页 > 解决方案 > 为什么这个响应式 CSS 不能改变我的布局？

html - 为什么这个响应式 CSS 不能改变我的布局？

问题描述

<!DOCTYPE HTML>
<html style="height: 100%;">
    <head>
        <link rel="stylesheet" href="style.css"></head>
    </head>
    <body style="height: 100%;">
    <div class="flexParent">
        <div id="sidebar" class="sidebar debug"></div>
        <div id="summary" class="mainContent debug"></div>  

    </div>
    </body>
</html>

@media (max-width:250px){
    .flexParent{display: flex;flex-direction:column;}
}
.debug{border-style: solid;}
.flexParent{display:flex;height:100%;width:100%;margin:0;flex-direction: row;}
.sidebar{flex: 0 1 200px;height: 100%;text-align: center;margin-right: 2px;}
.mainContent{flex: 1;}

当我尝试将浏览器设置为 240 像素时，它不起作用。我认为这应该将行更改为列。

标签： htmlcss

解决方案

推荐阅读