我很难理解字体缩放。

我目前有一个字体大小为100%的网站。但这是100%的吗?这似乎是在16个像素处计算出来的。

我的印象是,100%会以某种方式指代浏览器窗口的大小,但显然不是因为无论窗口大小调整为移动宽度还是宽屏桌面,都是16像素。

如何使站点上的文本与其容器相关?我尝试过使用它们,但这也无法扩展。

我的理由是,当你调整大小时,像我的菜单这样的东西会变得压扁,所以我需要减少.menuItem等元素相对于容器宽度的px字体大小。(例如,在大型桌面上的菜单中,22px的效果非常好。向下移动到平板电脑宽度,16px更合适。)

我知道我可以添加断点,但我真的希望文本能够缩放并具有额外的断点,否则,我将以每100像素宽度减少数百个断点来控制文本。


当前回答

这可能不太实用,但如果您希望字体是父级的直接函数,而不需要任何JavaScript侦听/循环(interval)来读取div/页面的大小,那么有一种方法可以做到。Iframes。

iframe中的任何内容都会将iframe的大小视为视口的大小。因此,诀窍是创建一个iframe,其宽度是您希望文本达到的最大宽度,其高度等于特定文本的最大高度*纵横比。

抛开视口单位不能与文本的父单位一起出现的限制(如中所示,具有与其他所有单位相同的%大小),视口单位确实提供了一个非常强大的工具:能够获得最小/最大尺寸。你不能在其他地方这样做-你不能说。。。使这个div的高度等于父对象的宽度。

也就是说,诀窍是使用vmin,并设置iframe大小,当高度是限制维度时,[fract]*总高度是一个好的字体大小,而当宽度是限制维度的时候,[fract]*总宽度。这就是为什么高度必须是宽度和纵横比的乘积。

对于我的特定示例

.main iframe{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: calc(3.5 * 100%);
  background: rgba(0, 0, 0, 0);
  border-style: none;
  transform: translate3d(-50%, -50%, 0);
}

这种方法的一个小烦恼是,您必须手动设置iframe的CSS。如果您附加整个CSS文件,这将占用许多文本区域的大量带宽。所以,我所做的是直接从CSS中附加我想要的规则。

var rule = document.styleSheets[1].rules[4];
var iDoc = document.querySelector('iframe').contentDocument;
iDoc.styleSheets[0].insertRule(rule.cssText);

您可以编写一个小函数来获取CSS规则/所有影响文本区域的CSS规则。

如果没有一些循环/聆听JavaScript,我想不出另一种方法。真正的解决方案是让浏览器提供一种根据父容器缩放文本的方式,并提供相同的vmin/vmax类型功能。

JSFiddle:https://jsfiddle.net/0jr7rrgm/3/(单击一次可将红色方块锁定在鼠标上,再次单击可释放)

大部分JavaScript都是我自定义的点击拖动功能。

其他回答

使用CSS变量

还没有人提到CSS变量,这种方法对我来说效果最好,所以:

假设你的页面上有一个列,它是移动用户屏幕宽度的100%,但最大宽度为800px,所以在桌面上,列的两边都有一些空间。将此置于页面顶部:

<script> document.documentElement.style.setProperty('--column-width', Math.min(window.innerWidth, 800)+'px'); </script>

现在您可以使用该变量(而不是内置的vw单元)来设置字体的大小。例如。

p {
  font-size: calc( var(--column-width) / 100 );
}

这不是一种纯CSS方法,但它非常接近。

功能如下:

document.body.setScaledFont = function(f) {
  var s = this.offsetWidth, fs = s * f;
  this.style.fontSize = fs + '%';
  return this
};

然后将所有文档子元素的字体大小转换为em或%。

然后向代码中添加类似的内容以设置基本字体大小。

document.body.setScaledFont(0.35);
window.onresize = function() {
    document.body.setScaledFont(0.35);
}

http://jsfiddle.net/0tpvccjt/

如果问题是宽屏桌面上的字体太大,我认为最简单的CSS方法应该是这样的(假设包装器最大宽度为1000像素)

.specialText{
    font-size: 2.4vw;
}

@media only screen and (min-width: 1000px) {
    .specialText {
        width: 24px;
    }
}

因此,它可以自动调整大小,以适应任何小于容器最大宽度的屏幕,当屏幕更宽时(几乎所有台式机和笔记本电脑),它可以固定大小。

有一种不使用JavaScript的方法可以做到这一点!

您可以使用内联SVG图像。如果SVG是内联的,则可以在SVG上使用CSS。您必须记住,使用此方法意味着您的SVG图像将响应其容器大小。

尝试使用以下解决方案。。。

HTML

<div>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360.96 358.98" >
      <text>SAVE $500</text>
  </svg>
</div>

CSS

div {
  width: 50%; /* Set your container width */
  height: 50%; /* Set your container height */

}

svg {
  width: 100%;
  height: auto;

}

text {
  transform: translate(40px, 202px);
  font-size: 62px;
  fill: #000;
}

例子:https://jsfiddle.net/k8L4xLLa/32/

想要更华丽的东西吗?

SVG图像还允许您对形状和垃圾进行处理。看看这个可扩展文本的好用例。。。

https://jsfiddle.net/k8L4xLLa/14/

看看我的代码。它使字体大小变小,以适应任何地方。

但我认为这并不能带来良好的用户体验

var containerWidth = $("#ui-id-2").width();
var items = $(".quickSearchAutocomplete .ui-menu-item");
var fontSize = 16;

items.each(function(){
    // Displaying a value depends sometimes on your case. You may make it block or inline-table instead of inline-block or whatever value that make the div take overflow width.
    $(this).css({"whiteSpace": "nowrap", "display": "inline-block"});
    while ($(this).width() > containerWidth){
         console.log("$(this).width()" + $(this).width() + "containerWidth" + containerWidth)
         $(this).css("font-size", fontSize -= 0.5);
    }
});