火狐书签栏怎样改变宽度,高度以及字体的大小

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了火狐书签栏怎样改变宽度,高度以及字体的大小相关的知识,希望对你有一定的参考价值。

参考技术A 不可以直接调节宽度,但可以把其他栏关闭来增加其宽度,
1、打开浏览器,
2、右键标签栏空白处,
3、出现以下选项,并把插件栏和其他与其同一行的栏去勾选即可。

根据容器的宽度和高度缩放字体大小[重复]

【中文标题】根据容器的宽度和高度缩放字体大小[重复]【英文标题】:Scaling font size based on width and height of container [duplicate] 【发布时间】:2021-02-13 11:56:46 【问题描述】:

所以我正在尝试为我的 HTML 文档设计一个更具响应性的设计,我想要排序的第一件事是 字体大小的缩放,具体取决于 高度和容器的宽度。现在我有以下内容:

我研究了一下,发现 css 中的单位“vw”允许字体根据容器进行缩放,但我只是注意到它只有在我调整浏览器宽度时才有效类似:

如图所示,如果我调整浏览器的宽度,文本确实会缩放,但是,我意识到当我调整浏览器的高度时,它不会缩放完全没有。

如何确保文本根据容器的widthheight进行缩放?

html,body 
    height: 100%;


.outer 
    height: 50%;
    border: 1px solid black;
    width: 50%;


#cat1 
    height: 50%;
    border: 1px solid black;
    font-size: 3vw;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    


#cat2 
    height: 50%;
    border: 1px solid black;
    font-size: 3vw;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href = "style.css">
    <title>Document</title>
</head>
<body>
    <div class = "outer">
        <div id = "cat1">
            This is text1
        </div>
        <div id = "cat2">
            This is text2
        </div>
    </div>
</body>
</html>

【问题讨论】:

***.com/questions/30693928/… 这是一个类似的问题,请检查我的答案以了解我尝试做的事情。 您可以尝试使用CSS Clamp() 之类的内容。这取决于视口大小和基本字体。 我还可以添加使用 calc() 和 CSS 变量以及视口单元 vmin,例如 calc(var(--font-size) * 1vmin) 可能会有所帮助。 【参考方案1】:

虽然font-size CSS 属性可以采用相对单位的无单位数字、百分比或长度,但所有这些都与父元素的font-size 相关。即使您使用 CSS calc 函数,任何度量都将被理解为父元素的 font-size 的比率,而不是元素的宽度或高度。

唯一的例外是remren 单位,它们与&lt;html&gt; 元素的font-sizevwvh 单位相关,它们分别是视口宽度的百分比和高度。换句话说,100vh 是窗口的高度,100vw 是窗口的宽度。 Red Blob Games 有一个 interesting article 使用 vw 单位进行响应式字体大小调整,我建议您阅读一下。

您可以使用CSS transforms 来缩放元素的渲染大小,但这会使文本显得模糊或拉伸,这绝对不是您在尝试使网站具有响应性和可访问性时想要的。

长话短说,没有唯一的 CSS 方法来设置相对于元素大小的字体大小。如果你真的想这样做,你将不得不使用 JavaScript 来计算元素的像素大小,然后将 px 值传递给 font-size CSS 属性。

但到那时,您将积极反对网络应有的工作方式:元素拉伸以适应其内容,而不是相反。

【讨论】:

那篇 Red Blob Games 文章将 madebymike.com.au/writing/precise-control-responsive-typography 列为其来源之一,也是另一个有趣的参考。【参考方案2】:

编辑:这种方法可能是错误的。 这会将字体大小设置为继承字体大小的一部分,而不是父元素的宽度/高度。 请查看:

    It might not be possible with only css. Em is not the correct answer as it relates to font-size of parent element and not its height or width.

旧答案

使用 em 单位而不是 vw。

html,body 
    height: 100%;


.outer 
    height: 50%;
    border: 1px solid black;
    width: 50%;


#cat1 
    height: 50%;
    border: 1px solid black;
    font-size: .5em;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    


#cat2 
    height: 50%;
    border: 1px solid black;
    font-size: 1em;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href = "style.css">
    <title>Document</title>
</head>
<body>
    <div class = "outer">
        <div id = "cat1">
            This is text1
        </div>
        <div id = "cat2">
            This is text2
        </div>
    </div>
</body>
</html>

【讨论】:

以上是关于火狐书签栏怎样改变宽度,高度以及字体的大小的主要内容,如果未能解决你的问题,请参考以下文章

火狐浏览器怎么设置标签页宽度?

通过文本字段上的自动布局调整字体大小并改变高度

如何在 iOS Swift4 中滚动时增加/减少 UILabel 字体大小以及宽度和高度

iOS-UILabel根据文本字体大小计算label宽度;以及自适应高度

怎么在VB中改变toolbar的高度和宽度

如何根据标签可用的高度调整 UILabel 字体大小