[英]CSS: Scale font-size to fit parent block element height
Almost every question and answer I have found talks about the viewport size; 几乎每个问题和答案我都找到了关于视口大小的讨论; this isn't really my issues.
这不是我的问题。
Take this Pen... https://codepen.io/njt1982/pen/pZjZNM 拿这支笔... https://codepen.io/njt1982/pen/pZjZNM
I have a very basic Bootstrap 4 grid like this: 我有一个非常基本的Bootstrap 4网格,如下所示:
<div class="container mt-4">
<div class="row">
<div class="col border"><div class="tile"><span>A</span></div></div>
<div class="col border"><div class="tile"><span>B</span></div></div>
...
...
</div>
<div class="row">
<div class="col border"><div class="tile"><span>A</span></div></div>
<div class="col border"><div class="tile"><span>B</span></div></div>
...
...
</div>
...
...
</div>
And some CSS to make these into squares (using the padding-top: 100%
trick): 还有一些CSS将这些变为正方形(使用
padding-top: 100%
技巧):
.col {
padding: 0;
}
.col:not(:last-child) {
border-right: none !important;
}
.row:not(:last-child) .col {
border-bottom: none !important;
}
.tile {
padding: 100% 0 0;
font-size: 5vw;
}
.tile span {
position: absolute;
left: 0;
top: 50%;
line-height: 0;
width: 100%;
text-align: center;
}
The problem here is that 5vw makes the font just the right size on my 2560px wide viewport, but by the time I have reached the lower breakpoint, it not longer fills the cells. 这里的问题是5vw使我的2560px宽视口上的字体大小合适,但是当我到达较低的断点时,它不再填充单元格。 I'd like to avoid tonnes of media queries to "tune" it.
我想避免大量的媒体查询来“调整”它。
Is there any CSS-only way of saying "font-size = container_height"? 是否有任何CSS的方式说“font-size = container_height”?
font-size: 100%
seems to just set the font to the base size (not the parent size, like you'd expect height: 100%
to do). font-size: 100%
似乎只是将字体设置为基本大小(不是父级大小,就像你期望的height: 100%
要做)。 Some goes for the likes of em
's... em
的... vh
and that works fine until the viewport height changes (so same problem as vw). vh
,它可以正常运行,直到视口高度发生变化(与vw一样的问题)。 calc()
? calc()
? UPDATE: Possible answer using SVGs? 更新:使用SVG可能的答案? https://stackoverflow.com/a/51333267/224707
https://stackoverflow.com/a/51333267/224707
One possible solution I have found is using SVG's... 我发现一个可能的解决方案是使用SVG ...
https://codepen.io/njt1982/pen/EpVeYw https://codepen.io/njt1982/pen/EpVeYw
Each column becomes this: 每列成为:
<div class="col border">
<div class="tile">
<svg viewBox="0 0 20 20">
<text x="50%" y="14" text-anchor="middle">A</text>
</svg>
</div>
</div>
Then we drop all notion of font-size and do this: 然后我们放弃所有font-size概念并执行以下操作:
.tile svg {
position: absolute;
left: 0;
top: 0;
line-height: 0;
width: 100%;
height: 100%;
fill: #333;
}
Seems to scale pretty well - I have not, however, browser tested it... 似乎可以很好地扩展 - 但是,我还没有对浏览器进行测试...
Here you go: 干得好:
https://codepen.io/sphism/pen/LBGmRm https://codepen.io/sphism/pen/LBGmRm
Flexbox solution, scales with browser, works in both portrait and landscape, fonts scale, nice clean html, no svg's. Flexbox解决方案,与浏览器一起扩展,适用于纵向和横向,字体缩放,漂亮干净的HTML,没有svg。
EDIT: added the size-* classes so you can easily change the grid size just by adding the class, eg .grid.size-4 would be a 4x4 grid. 编辑:添加size- *类,这样您只需添加类就可以轻松更改网格大小,例如.grid.size-4将是一个4x4网格。
html: HTML:
<div class="container">
<div class="grid size-7">
<div class="tile">A</div>
<div class="tile">B</div>
<div class="tile">C</div>
<div class="tile">D</div>
<div class="tile">E</div>
<div class="tile">F</div>
<div class="tile">G</div>
<div class="tile">H</div>
<div class="tile">A</div>
<div class="tile">B</div>
<div class="tile">C</div>
<div class="tile">D</div>
<div class="tile">E</div>
<div class="tile">F</div>
<div class="tile">G</div>
<div class="tile">H</div>
<div class="tile">A</div>
<div class="tile">B</div>
<div class="tile">C</div>
<div class="tile">D</div>
<div class="tile">E</div>
<div class="tile">F</div>
<div class="tile">G</div>
<div class="tile">H</div>
<div class="tile">A</div>
<div class="tile">B</div>
<div class="tile">C</div>
<div class="tile">D</div>
<div class="tile">E</div>
<div class="tile">F</div>
<div class="tile">G</div>
<div class="tile">H</div>
<div class="tile">A</div>
<div class="tile">B</div>
<div class="tile">C</div>
<div class="tile">D</div>
<div class="tile">E</div>
<div class="tile">F</div>
<div class="tile">G</div>
<div class="tile">H</div>
<div class="tile">A</div>
<div class="tile">B</div>
<div class="tile">C</div>
<div class="tile">D</div>
<div class="tile">E</div>
<div class="tile">F</div>
<div class="tile">G</div>
<div class="tile">H</div>
<div class="tile">A</div>
<div class="tile">B</div>
<div class="tile">C</div>
<div class="tile">D</div>
<div class="tile">E</div>
<div class="tile">F</div>
<div class="tile">G</div>
<div class="tile">H</div>
<div class="tile">A</div>
<div class="tile">B</div>
<div class="tile">C</div>
<div class="tile">D</div>
<div class="tile">E</div>
<div class="tile">F</div>
<div class="tile">G</div>
<div class="tile">H</div>
</div>
</div>
scss: SCSS:
// 100 would have no space around it
// $gridSize: 90vw; // Works in portrait.
// $gridSize: 90vh; // Works in Landscape.
$gridSize: 90vMin; // Works in both.
.container {
// Full size of page
height: 100vh;
width: 100vw;
// Center the grid x and y
display: flex;
align-items: center;
justify-content: center;
}
.grid {
// Grid will center in container if you want a bit of space around it.
height: $gridSize;
width: $gridSize;
// This is how we make the grid
display: flex;
flex: 0 0 auto;
flex-wrap: wrap;
}
// Styles for all tiles
.tile {
display: block;
border: 1px solid gray;
text-align: center;
box-sizing: border-box;
}
// Number of rows and columns.
// $size: 8;
@for $size from 1 through 8 {
// eg 100/8
$tileSize: $gridSize / $size;
// Half th esize of the tile, or whatever you want.
$fontSize: $tileSize * 0.5;
.size-#{$size} {
.tile {
// Constrain the tiles to exact size we want.
width: $tileSize;
min-width: $tileSize;
max-width: $tileSize;
height: $tileSize;
min-height: $tileSize;
max-height: $tileSize;
flex-basis: $tileSize;
// Set fonts to same line height as tile, center them and set font size.
line-height: $tileSize;
font-size: $fontSize;
}
// Just hide extra divs so it renders properly.
$maxTiles: $size * $size + 1;
.tile:nth-child(n + #{$maxTiles}) {
display: none !important;
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.