css - 根据 div 大小调整字体大小-6ren

css - 根据 div 大小调整字体大小

转载作者：技术小花猫更新时间：2023-10-29 10:13:27

24

4

<分区>

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

然而，文本不会调整大小 - 即使我使用百分比也是如此。

如何调整文本大小，使其在整个页面中始终保持相同的比例？
这是处理多种分辨率的合适解决方案吗？还是我应该在 CSS 中进行多次 @media 检查并针对每种媒体类型进行多次布局？

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>

24

4

0

文章推荐： jquery - 如何使用 jQuery 异步加载 CSS？

文章推荐： objective-c - Objective-C : How to change text color in navigation bar

文章推荐： css - 打印时防止表格分页

objective-c - 这可以缩短吗？字体=字体？字体 : defaultFont;
你知道更好的写法吗 font = font ? font : defaultFont; 我所知道的是: if(!font) { font = defaultFont } 我知道这是一个小工具问
java - 即使声明了类(字体)和方法(字体)也找不到符号？
我正在编写代码，但无法编译，即使类(字体)已通过 import javafx.scene.text.*; 导入我知道这个方法font包含在字体中。这是我的代码: package helloworld
html - 格式化按钮(字体，字体(相对)大小，对齐方式，内边距)
我已经构建了一个按钮，但在格式设置(即平方、内联文本等)方面遇到了问题我目前的问题是:正文分为2部分- 上线正常-下一行是较大的字体大小我的动画 react 正确，但文本应该在箭头的顶线和底线内。
JavaScript 字体
好的，所以我想在网页上使用固定系统作为字体。我可以使用 Cufon，但我希望人们能够在鼠标悬停时选择文本并复制它。有人有什么吗？最佳答案我使用 fontsquirrel 的 @font-face
iPhone SDK 字体
我找到了 iOS 4.2 可用字体列表(链接 here )，但该列表与早期版本的 SDK 略有不同(链接 here )。我可以很好地更改代码中的字体，但如果我使用 iOS 4.2 列表中可用的字体，
iphone - UITableView 字体
我正在尝试更改 TableView 标题上的字体颜色，其中显示“加利福尼亚/纽约”。我该怎么做？在黑色背景上，文本需要是白色的，但无法弄清楚这一点。谢谢最佳答案如果您尝试更改标题颜色，可以使用
java - 字体 - 如何定位字符串的左上角？
假设我想使用 java.awt.Graphics.drawString(String str, int x, int y)在某些特定坐标处绘制字符串的方法，例如 (300, 300)。然而drawSt
puppeteer - 如何将Puppeteer指向本地镜像/字体？
我想使用Puppeteer从HTML字符串生成图像。现在我有这样的事情: const html = _.template(` Hello {{ test }}!
日语 Unicode 字体
我正在创建一个游戏。我有一些带有文本的用户界面。最近我们想添加日语版本，但我遇到字体问题。我使用 stb_freetype 来光栅化字体，并且我支持 Unicode，所以这应该不是问题。但大多数字体似
clojure - 一个文本区域有不同的颜色/字体
我可以在一个文本区域中使用不同的前景色吗？不同的字体？我想添加类似“hh:mm:ss 昵称:消息”的内容，时间为灰色，名称 - 蓝色，消息 - 黑色。最佳答案我在评论中犯了一个错误:你想要的是
java - 字体，返回默认大小
每次我更改字体时，它都会返回到默认大小，即 12，即使我之前使用“ Jade 野”菜单更改它，它每次也只会返回到 12，我的猜测是这样我使用deriveFont()更改大小，但现在没有其他方法可以更改
Java JTextArea 字体
我的电脑上安装了一种名为“BMW1”的自定义字体。我试图循环遍历此字体中的所有条目并将它们显示在 JTextArea 中。我有以下代码: JTextArea displayArea = new JT
CSS、字体、松鼠生成器
我尝试通过 Squirrel 理解生成的代码，这里是输出: @font-face { font-family: 'someFont'; src: url('someFont.eot')
css - 根据用户选择动态更改网页中的字体/字体
我知道有多种方法可以通过 JS/DHTML 动态更改网页的字体属性，或者用 Flash 呈现的字体(使用 sIFR 或 Cufon)替换文本。但是，我找不到任何根据用户选择动态更改网页上使用的字体的好
具有非标准样式的 CSS 字体
使用具有非标准样式名称(例如“Inline”或“Outline”)而不是标准样式(例如“Bold”和“Italic”)的字体系列，如何使用 css 选择字体的不同样式？设置 font-family
html - 字体、背景和页脚有问题
我对 html/css 有点陌生，我正在制作我的第一个网站，但我只是想不通一些东西。首先，我在 dreaweaver 中工作...在 dreaweaver 中，一切看起来都不错，但是当我预览时，我缺
c++ - 在Allegro5中绘制部分图像/字体
有没有办法在 Allegro5 中只绘制(或显示)图像/字体的一部分？例如，如果我有一个正方形 A 和一个图像 B，我只想绘制/显示 B 中与 A(在本例中为 C)重叠的部分，我该怎么做？插图:
html 字体/文本颜色在打印页面预览和打印时不会改变
所以，我有一个正在生成的报告 html 文件，其中有需要白色文本/字体的黑框。在通用 html 显示中一切都很好，但是当我尝试打印页面时，ctrl + p 或自定义打印功能，文本/字体保持为标准颜色，
打印或导出时无法正确呈现 Matlab 字体
我正在尝试制作一个非常适合 LaTeX 文档的 matlab 图形。一个已知的问题是 XTickLabel 和 YTickLabels 不使用 LaTeX 解释器渲染，导致图形不好看。 (注意:我意识
c# - 如何定义跨多个表单使用的默认颜色/字体？
我需要在一个公共(public)位置使用默认颜色和字体，以便在桌面应用程序的多个窗口窗体中使用它。这方面的最佳做法是什么？我正在考虑使用应用程序设置在那里定义它们，但我想确保这是推荐的方法或者是否

首页

博学

6Ren·AI

商城

css - 根据 div 大小调整字体大小