Question

我刚刚开始媒体查询和flex，我对CSS没有那种了解。

我有一个divB，位于容器divA中。我想让这个响应，如果屏幕尺寸小于某一点，那么divB尺寸将以相同的比例缩小。如果屏幕尺寸越来越大，在某些时候divB尺寸将被固定，并且容器divA的填充将随着屏幕的增长而增加。我怎样才能使用媒体查询和flex？

这是小提琴

https://jsfiddle.net/w0fopsyp/1/

<div class="container">
  <div class="table-element">
  </div>
</div>

但我对此怎么做感到困惑？

如果问题太基础，请忽略？

Answer 1

根据屏幕尺寸，您可以更改响应媒体查询“padding：20px”

<style type="text/css">
    .container{
      border:2px red solid;
      padding:20px
    }

    .table-element{
      border:2px green solid;
      height:50px;
    }
    @media screen and (max-width:1166px) {
        .container{ padding:50px;}
    }
    @media screen and (max-width:1024px) {
        .container{ padding:50px;}
    }
    @media screen and (max-width:980px) {
        .container{ padding:50px;}
    }
    @media screen and (max-width:767px) {
        .container{ padding:50px;}
    }
    @media screen and (max-width:599px) {
        .container{ padding:50px;}
    }
    @media screen and (max-width:479px) {
        .container{ padding:50px;}
    }
    @media screen and (max-width:374px) {
    .container{ padding:50px;}
    }
    </style>
<div class="container">
  <div class="table-element">
  </div>
</div>

根据屏幕大小增加div的填充

1 个答案: