CSS 根据 div 大小调整字体大小

Question

提问by Nick Ginanto

It is made of 9 boxes, with the middle on has text it in. I've made it so the boxes so they will resize with the screen resize so it will remain in the same place all the time.

它由 9 个盒子组成，中间有文字。我已经做了这样的盒子，所以它们会随着屏幕调整大小而调整大小，所以它会一直保持在同一个地方。

The text, however, doesn't resize - even when I use percentage.

但是，即使我使用百分比，文本也不会调整大小。

How do I resize the text so it will always be the same ratio from the entire page?
Is this a proper solution to handle multiple resolutions? or should I have many @mediachecks in the CSS and have many layouts for each media types?

如何调整文本大小，使其与整个页面的比例始终相同？
这是处理多个分辨率的正确解决方案吗？或者我应该@media在 CSS 中进行许多检查并为每种媒体类型设置许多布局？

html,
body {
  height: 100%;
  width: 100%;
}

#launchmain {
  width: 55%;
  display: inline-block;
  position: relative;
  top: 10%;
  left: 25%;
}

#launchmain:after {
  padding-top: 79.26%;
  display: block;
  content: '';
  margin-top: 10px;
}

#box1 {
  border: 1px solid #000000;
  position: absolute;
  width: 25.37%;
  height: 21.88%
}

#box2 {
  border: 1px solid #000000;
  width: 48.48%;
  height: 21.88%;
  position: absolute;
  left: 25.64%
}

#box3 {
  border: 1px solid #000000;
  width: 25.37%;
  height: 21.88%;
  position: absolute;
  left: 74.39%;
}

#box4 {
  border: 1px solid #000000;
  width: 33.235%;
  height: 53.84%;
  position: absolute;
  top: 22.07%;
}

#maininvite {
  border: 1px solid #000000;
  width: 33.53%;
  height: 53.84%;
  position: absolute;
  top: 22.07%;
  left: 33.235%;
}

#box6 {
  border: 1px solid #000000;
  width: 33.235%;
  height: 53.84%;
  position: absolute;
  top: 22.07%;
  left: 66.765%;
}

#box7 {
  border: 1px solid #000000;
  width: 25.37%;
  height: 21.88%;
  position: absolute;
  top: 76.2%;
}

#box8 {
  border: 1px solid #000000;
  width: 48.48%;
  height: 21.88%;
  position: absolute;
  left: 25.64%;
  top: 76.2%;
}

#box9 {
  border: 1px solid #000000;
  width: 25.37%;
  height: 21.88%;
  position: absolute;
  top: 76.2%;
  left: 74.39%;
}

#maininvite h2 {
  font-size: 180%;
}

p {
  position: relative;
  font-size: 80%;
}

<div id="launchmain">
  <div id="box1"></div>
  <div id="box2"></div>
  <div id="box3"></div>
  <div id="box4"></div>
  <div id="maininvite">
    <h2> header</h2>
    <p>not a lot of text here but still overflowing</p>
  </div>
  <div id="box6"></div>
  <div id="box7"></div>
  <div id="box8"></div>
  <div id="box9"></div>
</div>

Answer 1

回答by humanityANDpeace

My answer does not require Javascript and only relies on CSS3 (available in most modern browsers). I personally like it very much if design is not relying on Javascript too much.

我的答案不需要 Javascript，只依赖 CSS3（在大多数现代浏览器中可用）。如果设计不是太依赖 Javascript，我个人非常喜欢它。

My answer is a "pure CSS3 , no Javascript required"-solution:

我的答案是“纯 CSS3，不需要 Javascript”-解决方案：

The solution as can be seen here (http://jsfiddle.net/uNF3Z/16/) uses the following additions to the CSS styles (which make use of the @mediaquery of CSS3 which)

可以在此处看到的解决方案（http://jsfiddle.net/uNF3Z/16/）使用以下对 CSS 样式的添加（利用@mediaCSS3的查询）

@media all and (min-width: 50px)   {  body  { font-size:0.1em;  } }
@media all and (min-width: 100px)  {  body  { font-size:0.2em;  } }
@media all and (min-width: 200px)  {  body  { font-size:0.4em;  } }
@media all and (min-width: 300px)  {  body  { font-size:0.6em;  } }
@media all and (min-width: 400px)  {  body  { font-size:0.8em;  } }
@media all and (min-width: 500px)  {  body  { font-size:1.0em;  } }
@media all and (min-width: 600px)  {  body  { font-size:1.2em;  } }
@media all and (min-width: 700px)  {  body  { font-size:1.4em;  } }
@media all and (min-width: 800px)  {  body  { font-size:1.6em;  } }
@media all and (min-width: 900px)  {  body  { font-size:1.8em;  } }
@media all and (min-width: 1000px) {  body  { font-size:2.0em;  } }
@media all and (min-width: 1100px) {  body  { font-size:2.2em;  } }
@media all and (min-width: 1200px) {  body  { font-size:2.4em;  } }
@media all and (min-width: 1300px) {  body  { font-size:2.6em;  } }
@media all and (min-width: 1400px) {  body  { font-size:2.8em;  } }
@media all and (min-width: 1500px) {  body  { font-size:3.0em;  } }
@media all and (min-width: 1500px) {  body  { font-size:3.2em;  } }
@media all and (min-width: 1600px) {  body  { font-size:3.4em;  } }
@media all and (min-width: 1700px) {  body  { font-size:3.6em;  } }

What this in effect causes is that the font-size is adjusted to the available screen width. This adjustment is done in steps of 100px (which is finegrained enough for most purposes) and covers a maximum screen width of 1700px which I reckon to be amply (2013) and can by adding further lines be further improved.

这实际上导致字体大小调整为可用的屏幕宽度。这种调整以 100px 的步长完成（对于大多数用途来说已经足够细粒度了）并且覆盖了 1700px 的最大屏幕宽度，我认为这是足够的（2013 年）并且可以通过添加更多的线条来进一步改进。

A side benefit is that the adjustment of the font-size is occuring at each resize. This dynamic adjustment (because for instance the browser windows is resized) might not yet be covered by the Javascript based solution.

附带的好处是每次调整大小都会调整字体大小。基于 Javascript 的解决方案可能尚未涵盖这种动态调整（因为例如调整浏览器窗口的大小）。

Answer 2

回答by Patrick

In regards to your code, see @Coulton. You'll need to use JavaScript.

关于您的代码，请参阅@Coulton。您需要使用 JavaScript。

Checkout either FitText(it does work in IE, they just ballsed their site somehow) or BigText.

结帐FitText（它确实在 IE 中工作，他们只是以某种方式对他们的网站进行了检查）或BigText。

FitText will allow you to scale some text in relation to the container it is in, while BigText is more about resizing different sections of text to be the same width within the container.

FitText 将允许您相对于它所在的容器缩放一些文本，而 BigText 更多的是将文本的不同部分调整为在容器内具有相同的宽度。

BigText will set your string to exactly the width of the container, whereas FitText is less pixel perfect. It starts by setting the font-size at 1/10th of the container element's width. It doesn't work very well with all fonts by default, but it has a setting which allows you to decrease or increase the 'power' of the re-size. It also allows you to set a min and max font-size. It will take a bit of fiddling to get working the first time, but does work great.

BigText 会将您的字符串设置为容器的宽度，而 FitText 的像素不那么完美。它首先将字体大小设置为容器元素宽度的 1/10。默认情况下，它不适用于所有字体，但它有一个设置，允许您减少或增加重新调整大小的“力量”。它还允许您设置最小和最大字体大小。第一次开始工作需要一些麻烦，但效果很好。

http://marabeas.io<- playing with it currently here. As far as I understand, BigText wouldn't work in my context at all.

http://marabeas.io<- 目前在这里玩它。据我了解，BigText 在我的上下文中根本不起作用。

For those of you using Angularjs, here's an Angular versionof FitText I've made.

对于那些使用 Angularjs 的人，这是我制作的 FitText的Angular 版本。

Here's a LESS mixin you can use to make @humanityANDpeace's solution a little more pretty:

这是一个 LESS mixin，您可以使用它使@humanityANDpeace 的解决方案更漂亮一点：

@mqIterations: 19;
.fontResize(@i) when (@i > 0) {
    @media all and (min-width: 100px * @i) { body { font-size:0.2em * @i; } }
    .fontResize((@i - 1));
}
.fontResize(@mqIterations);

And an SCSS version thanks to @NIXin!

感谢@NIXin 的 SCSS 版本！

$mqIterations: 19;
@mixin fontResize($iterations) { 
    $i: 1; 
    @while $i <= $iterations { 
        @media all and (min-width: 100px * $i) { body { font-size:0.2em * $i; } } 
        $i: $i + 1; 
    }
} 
@include fontResize($mqIterations);

Answer 3

回答by ffflabs

I was looking for the same funcionality and found this answer. However, I wanted to give you guys a quick update. It's CSS3's vmin unit.

我正在寻找相同的功能并找到了这个答案。但是，我想给你们一个快速的更新。它是 CSS3 的 vmin 单位。

p, li
{
  font-size: 1.2vmin;
}

vmin means 'whichever is smaller between the 1% of the ViewPort's height and the 1% of the ViewPort's width'.

vmin 表示“视口高度的 1% 和视口宽度的 1% 之间的较小者”。

More info on SitePoint

有关 SitePoint 的更多信息

Answer 4

回答by Abhishek Sen

The answer that i am presenting is very simple, instead of using "px","em" or "%", i'll use "vw". In short it might look like this:- h1 {font-size: 5.9vw;} when used for heading purposes.

我提出的答案非常简单，我将使用“vw”而不是“px”、“em”或“%”。简而言之，当用于标题目的时，它可能看起来像这样：- h1 {font-size: 5.9vw;}。

See this:Demo

看这个：演示

For more details:Main tutorial

更多详情：主教程

Answer 5

回答by niieani

Here's a SCSS version of @Patrick's mixin.

这是@Patrick 的 mixin 的 SCSS 版本。

$mqIterations: 19;
@mixin fontResize($iterations)
{
  $i: 1;
  @while $i <= $iterations
  {
    @media all and (min-width: 100px * $i) {
      body { font-size:0.2em * $i; }
    }
    $i: $i + 1;
  }
}
@include fontResize($mqIterations);

CSS 根据 div 大小调整字体大小

提问by Nick Ginanto

回答by humanityANDpeace

回答by Patrick

回答by ffflabs

回答by Abhishek Sen

回答by niieani

相关推荐

最近更新

标签

CSS 根据 div 大小调整字体大小

提问by Nick Ginanto

回答by humanityANDpeace

回答by Patrick

回答by ffflabs

回答by Abhishek Sen

回答by niieani

相关推荐

CSS 媒体查询重叠的规则是什么？

如何使用 Richfaces 和 CSS 在 JSF 应用程序中添加背景图像？

CSS Safari 更改选择高度

是否有 CSS 父选择器？

相关推荐

最近更新

标签