html - Flexbox:文本没有按比例缩小

标签 html css flexbox viewport-units

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

基本上它是有效的 - 但是当我将浏览器窗口的大小调整为手机大小屏幕的假平板电脑大小屏幕时，当屏幕尺寸小于 568 像素时， Logo 内的文本开始缩小。

有一些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 在下面的代码片段中，结果帧小于 568 像素(在我的 MacBook Pro 13"上)，所以我不确定你们是否能看到 Logo 的外观，因此我'我会添加指向 Logo 图片的链接，以确保您理解我糟糕的解释；)

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>

最佳答案

由于您的字体大小使用视口(viewport)单位 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>

关于html - Flexbox:文本没有按比例缩小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44503306/

上一篇：html - 将元素的高度设置为等于元素的宽度

下一篇：html - 需要帮助在 html 和 css 上构建导航栏

相关文章：

html - Accordion 背景图像的大小

javascript - stop() 的 slideToggle 问题

javascript - 使用类的按钮过渡效果无法正常工作

html - 除了级联 flex div 之外，还可以使用 css 翻转二维框

css - Safari 8 Flexbox float 和居中

javascript - 如何在以下 :<img alt ="Avatar" src =`https://graph.facebook.com/${snAvatarSnuid}/picture` > 中的 img src 中传递变量

html - 背景图像悬停状态

html - 如何使父级的Flexbox高度的内部div

jquery - 列在 wordpress 中具有 100% 的高度

html - 具有固定高度状态栏的 100% 高度内容的适当 CSS

©2024 IT工具网  联系我们