我很难理解字体缩放。
我目前有一个字体大小为100%的网站。但这是100%的吗?这似乎是在16个像素处计算出来的。
我的印象是,100%会以某种方式指代浏览器窗口的大小,但显然不是因为无论窗口大小调整为移动宽度还是宽屏桌面,都是16像素。
如何使站点上的文本与其容器相关?我尝试过使用它们,但这也无法扩展。
我的理由是,当你调整大小时,像我的菜单这样的东西会变得压扁,所以我需要减少.menuItem等元素相对于容器宽度的px字体大小。(例如,在大型桌面上的菜单中,22px的效果非常好。向下移动到平板电脑宽度,16px更合适。)
我知道我可以添加断点,但我真的希望文本能够缩放并具有额外的断点,否则,我将以每100像素宽度减少数百个断点来控制文本。
使用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方法,但它非常接近。
你可能正在寻找这样的东西:
http://jsfiddle.net/sijav/dGsC9/4/ http://fiddle.jshell.net/sijav/dGsC9/4/show/
我使用过flowtype,它工作得很好(不过它是JavaScript而不是纯CSS解决方案):
$('body').flowtype({
minFont: 10,
maxFont: 40,
minimum: 500,
maximum: 1200,
fontRatio: 70
});
纯CSS在某种程度上是可能的。
.自动调整文本大小{content:url(“data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'version='1.1'height='1.3em'width='10em'><text x='0'y='0.9em'fill='red'>这里是调整大小的文本</text></svg>“);背景色:rgba(0,0,0,0.06);动画:成长2s无限交替两者;}@关键帧增长{来自{width:100px;}到{width:300px;}}<div class=“自动调整文本大小”></div>
解释
内容规则设置元素的内容,它可以是图像的URL,包括SVG图像。SVG图像可以包含文本,因此基本上您有一个带有文本的背景图像,该图像根据其父图像的大小调整大小。您也可以使用background image属性,但与内容不同,它不会影响元素的布局,因此您需要定义父元素的大小。
这种方法的问题是,您需要定义SVG中文本的颜色、大小和位置。他们不会从父母那里继承。但你可以用Sass和Less变得聪明。此解决方案还可能存在可访问性问题。
我不建议在任何地方使用。但它在某些情况下应该相当有用。