Flexbox：文本没有按比例缩小

Question

对于我正在创建的网站，我设法在 Flexbox/CSS 中重新创建了公司徽标（这是相当基本的）。我在互联网上的某个地方找到了 Flexbox CSS，但不记得在哪里。基本没动过，我自己的样式在底部 /* My Styles */

所以它基本上有效 - 但是当我将浏览器 window 调整为 phone-size-screen 的假平板电脑尺寸屏幕时，徽标内的文本开始缩小屏幕尺寸小于 568px。

还有一些CSS

@media all and (max-width: 568px) {
.col-span-1,
.col-span-3,
.col-span-4,
.col-span-5 {
flex-basis: 50%;
}

这好像和文字变小有关，但我就是不明白。直到几天前，我才听说过 flexbox，所以在这方面我不是专家。

I need the text inside the logo to grow and shrink proportionally no matter what the screen size is, but I also need the flexboxes to shove below each other when the screen size gets smaller than 568px.

你们能帮我解决这个问题吗？

提前感谢您的帮助和时间，非常感谢！

亲切的问候，

菲克·巴兹曼斯

PS 在下面的代码片段中，结果框小于 568px（在我的 MacBook Pro 13" 上），所以我不确定你们能看出徽标应该看起来，因此我将在徽标图片中添加 link 以确保您理解我糟糕的解释；）

Picture of original logo

@charset "UTF-8";

/* CSS Document */

.row {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.col {
  flex: 1 1 8%;
  margin: 0 0 0.5rem 0;
  padding: 0.5em 10px;
  box-sizing: border-box;
}

.col-logo {
  flex: 1 1 8%;
  margin: 0;
  padding: 0.5em 10px;
  box-sizing: border-box;
}


/* nested grids */

.row .row,
.row.nested {
  flex: 1 1 auto;
  margin-top: -0.5em;
}


/* full width grids */

.row.wide-fit {
  margin-left: -10px;
  margin-right: -10px;
}


/* center grids */

.row.center {
  justify-content: center;
}

.center .col {
  flex-grow: 0;
  flex-shrink: 0;
}


/* columns widths */

.col-span-1 {
  flex-basis: 8.3333%;
}

.col-span-2 {
  flex-basis: 16.6666%;
}

.col-span-3 {
  flex-basis: 25%;
}

.col-span-4 {
  flex-basis: 33.3333%;
}

.col-span-5 {
  flex-basis: 41.6666%;
}

.col-span-6 {
  flex-basis: 50%;
}

.col-span-7 {
  flex-basis: 58.3333%;
}

.col-span-8 {
  flex-basis: 66.6666%;
}

.row .col-logo.col-span-8 {}

.col-span-9 {
  flex-basis: 75%;
}

.col-span-10 {
  flex-basis: 83.3333%;
}

.col-span-11 {
  flex-basis: 91.6666%;
}

.col-span-12 {
  flex-basis: 100%;
}


/* examples */

.fixed-width {
  flex: 0 0 500px;
  background-color: rgba(255, 0, 0, 0.1) !important;
}

@media all and (max-width: 568px) {
  .col-span-1,
  .col-span-2,
  .col-span-3,
  .col-span-4,
  .col-span-5 {
    flex-basis: 50%;
  }
  .col-span-6,
  .col-span-7,
  .col-span-8,
  .col-span-9,
  .col-span-10,
  .col-span-11 {
    flex-basis: 100%;
  }
  .nested .col {
    flex-basis: 100%;
  }
}


/* eye candy */

body {
  font-family: sans-serif;
}

.row {
  background-color: #cccccc;
  background-color: rgba(0, 0, 0, 0.1);
}

.col {
  background-color: #999999;
  background-color: rgba(0, 0, 0, 0.2);
  background-clip: content-box;
  border: 1px solid rgba(0, 0, 0, 0.1);
}


/* My Styles */

#header-logo-text-container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
}

.header-logo-container {
  min-width: 0;
  background-color: #eb5d60;
  padding: 1vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-logo-container:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.logo-whiteborder {
  border: 0.4vw solid white;
  display: flex;
  justify-content: center;
}

.logo-whiteborder:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.header-logo-text-big {
  color: white;
  display: flex;
  flex-shrink: 1;
  font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
  src: url('../font-gill-sans.woff');
  font-size: 3.3vw;
  margin-left: auto;
  margin-right: auto;
  min-width: 0;
  padding-left: 1vw;
  padding-right: 1vw;
}

.header-logo-text-small {
  color: white;
  display: flex;
  flex-shrink: 1;
  font-family: "Times New Roman";
  font-size: 1.4vw;
  letter-spacing: 0.12em;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1.7vw;
  margin-bottom: 1.7vw;
  min-width: 0;
  padding-left: 1vw;
  padding-right: 1vw;
}

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Untitled Document</title>
  <link href="css/durlinger-style.css" rel="stylesheet" type="text/css">
</head>

<body>

  <div class="row">

    <div class="col-logo col-span-4 header-logo-container">
      <div class="col-span-11 logo-whiteborder">
        <div id="header-logo-text-container">
          <div class="header-logo-text-big">Durlinger</div>
          <div class="header-logo-text-small">financieel beheer</div>
        </div>
      </div>
    </div>

    <div class="col-logo col-span-8">
      <!-- text beside logo -->

    </div>

  </div>

</body>

</html>

Answer 1

由于您的字体大小使用视口单位 vw，因此您也需要使用媒体查询将它们更改为类似这样的内容，我还在下面的代码段中将其添加到您的 @media 规则中

.header-logo-text-big {
  font-size: 13.2vw;
}
.header-logo-text-small {
  font-size: 5.6vw;
}

此外，为了使媒体查询正确覆盖以前的规则，它们应该在您的 CSS

中排在最后

堆栈片段

@charset "UTF-8";

/* CSS Document */

.row {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.col {
  flex: 1 1 8%;
  margin: 0 0 0.5rem 0;
  padding: 0.5em 10px;
  box-sizing: border-box;
}

.col-logo {
  flex: 1 1 8%;
  margin: 0;
  padding: 0.5em 10px;
  box-sizing: border-box;
}


/* nested grids */

.row .row,
.row.nested {
  flex: 1 1 auto;
  margin-top: -0.5em;
}


/* full width grids */

.row.wide-fit {
  margin-left: -10px;
  margin-right: -10px;
}


/* center grids */

.row.center {
  justify-content: center;
}

.center .col {
  flex-grow: 0;
  flex-shrink: 0;
}


/* columns widths */

.col-span-1 {
  flex-basis: 8.3333%;
}

.col-span-2 {
  flex-basis: 16.6666%;
}

.col-span-3 {
  flex-basis: 25%;
}

.col-span-4 {
  flex-basis: 33.3333%;
}

.col-span-5 {
  flex-basis: 41.6666%;
}

.col-span-6 {
  flex-basis: 50%;
}

.col-span-7 {
  flex-basis: 58.3333%;
}

.col-span-8 {
  flex-basis: 66.6666%;
}

.row .col-logo.col-span-8 {}

.col-span-9 {
  flex-basis: 75%;
}

.col-span-10 {
  flex-basis: 83.3333%;
}

.col-span-11 {
  flex-basis: 91.6666%;
}

.col-span-12 {
  flex-basis: 100%;
}


/* examples */

.fixed-width {
  flex: 0 0 500px;
  background-color: rgba(255, 0, 0, 0.1) !important;
}


/* eye candy */

body {
  font-family: sans-serif;
}

.row {
  background-color: #cccccc;
  background-color: rgba(0, 0, 0, 0.1);
}

.col {
  background-color: #999999;
  background-color: rgba(0, 0, 0, 0.2);
  background-clip: content-box;
  border: 1px solid rgba(0, 0, 0, 0.1);
}


/* My Styles */

#header-logo-text-container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
}

.header-logo-container {
  min-width: 0;
  background-color: #eb5d60;
  padding: 1vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-logo-container:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.logo-whiteborder {
  border: 0.4vw solid white;
  display: flex;
  justify-content: center;
}

.logo-whiteborder:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.header-logo-text-big {
  color: white;
  display: flex;
  flex-shrink: 1;
  font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
  src: url('../font-gill-sans.woff');
  font-size: 3.3vw;
  margin-left: auto;
  margin-right: auto;
  min-width: 0;
  padding-left: 1vw;
  padding-right: 1vw;
}

.header-logo-text-small {
  color: white;
  display: flex;
  flex-shrink: 1;
  font-family: "Times New Roman";
  font-size: 1.4vw;
  letter-spacing: 0.12em;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1.7vw;
  margin-bottom: 1.7vw;
  min-width: 0;
  padding-left: 1vw;
  padding-right: 1vw;
}

@media all and (max-width: 568px) {
  .col-span-1,
  .col-span-2,
  .col-span-3,
  .col-span-4,
  .col-span-5 {
    flex-basis: 50%;
  }
  .col-span-6,
  .col-span-7,
  .col-span-8,
  .col-span-9,
  .col-span-10,
  .col-span-11 {
    flex-basis: 100%;
  }
  .nested .col {
    flex-basis: 100%;
  }

  .header-logo-text-big {
    font-size: 13.2vw;
  }
  .header-logo-text-small {
    font-size: 5.6vw;
  }

}

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Untitled Document</title>
  <link href="css/durlinger-style.css" rel="stylesheet" type="text/css">
</head>

<body>

  <div class="row">

    <div class="col-logo col-span-4 header-logo-container">
      <div class="col-span-11 logo-whiteborder">
        <div id="header-logo-text-container">
          <div class="header-logo-text-big">Durlinger</div>
          <div class="header-logo-text-small">financieel beheer</div>
        </div>
      </div>
    </div>

    <div class="col-logo col-span-8">
      <!-- text beside logo -->

    </div>

  </div>

</body>

</html>

Flexbox：文本没有按比例缩小

Flexbox: text not shrinking proportionally

html

css

flexbox

viewport-units