Flexbox：文本不会按比例缩小
问题描述：
对于我创建的网站，我设法在Flexbox/CSS中重新创建公司徽标（这是相当基本的）。我在互联网上的某个地方找到了Flexbox CSS，但不记得在哪里。它主要是未触及的，我自己的风格是在底部/ *我的风格*/Flexbox：文本不会按比例缩小
所以它的工作，基本上 - 但是当我调整我的浏览器窗口，假屏幕的手机大小的平板电脑屏幕，当屏幕尺寸小于568px时，徽标内的文字开始缩小。
有一些CSS
@media all and (max-width: 568px) {
.col-span-1,
.col-span-3,
.col-span-4,
.col-span-5 {
flex-basis: 50%;
}
，似乎有什么东西做的文字变得越来越小，但我就是不明白。直到几天前，我还没有听说过flexbox，所以当谈到这个时我就不是古茹了。
我需要的文字标识内部增长和收缩比例，无论屏幕大小是什么，但我还需要flexboxes到 推低于对方当屏幕尺寸变得比568px小。
你们能帮我解决这个问题吗？
预先感谢您的帮助和时间，非常感谢！
亲切的问候，
Fieke Bazelmans
PS在下面的代码片段中，结果帧小于568px（在我的MacBook Pro 13" ），所以我不知道你们可以看到的标志应该寻找，为此我将添加一个链接标识的图片，以确保你明白我的蹩脚的解释;）
@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>
答
由于使用视单位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>+0
我跑了片段，查看它的整个页面和是！我从来没有猜到它是在font-size/vw中。现在几乎已经尝试过凝灰岩了，所以我对你的答案感到非常满意，并且会在晚饭后直接更新我的代码。它应该可以工作，因为你的代码也可以。如果没有，我会回来;） –
+0
@FiekeBazelmans欢迎您随时放下笔记。请接受我的回答，以便将来的用户知道该解决方案适合您 – LGSon
看的代码在后的第一线，柔性基础设置为50％，所以，当你认为媒体查询下宽调整，事情会萎缩，因为它是50％ – Huangism
是。 ..我意识到罪魁祸首是在那里，我只是不知道如何解决它。如果我拿出这些代码（已经尝试过），那么在调整屏幕大小时，徽标会保持完美，但柔性盒不再以较小的屏幕尺寸垂直显示。我希望他们这样做，并有一个完美的标志。 –
您可以随时覆盖某些元素的样式。如果你可以在小提琴或其他东西中创建一个简单的例子，我很确定这是一个相当简单的问题 – Huangism