【问题标题】:Variable font sizing with Less CSS [duplicate]使用较少 CSS 的可变字体大小 [重复]
【发布时间】:2017-02-28 09:18:51
【问题描述】:

我目前正在进行的项目需要在我们的应用程序中实现可变字体大小的辅助功能。我们目前使用较少的 css,我试图找出根据用户选择的设置来增加或减少字体大小的最佳方法。与更常见的用例不同,字体大小不会根据屏幕宽度而变化,所以我必须想办法设置字体大小,比如可能是对 cookie 或 URL 参数的媒体查询?

这是我设想的策略示例,但我无法弄清楚我需要什么样的媒体查询:

@smallFont: ~"(???)"; //What do I do here?
@medFont: ~"(???)";
@largeFont: ~"(???)";

@media @smallFont{
    @var-font-size:        0px;
}
@media @medFont{
    @var-font-size:        2px;
}

@media @largeFont{
    @var-font-size:        4px;
}

@font-size-xsmall:         14 + @var-font-size;
@font-size-smaller:        16 + @var-font-size;
@font-size-small:          18 + @var-font-size; 
@font-size-medium:         20 + @var-font-size;

【问题讨论】:

  • 不是重复的。请再次阅读问题。我不能依赖屏幕尺寸,因为屏幕尺寸保持不变。我需要以某种方式关闭设置。
  • 好吧,如果您阅读链接 Q 的答案,您会发现 any 媒体中的变量不会对所述媒体块之外的代码产生任何影响。所以在你的 sn-p 中没有??? 将永远工作(当然不包括对 cookie 或 URL 的媒体查询)。因此,您首先需要忘记@media 并寻找可以从CSS 和Less 访问的实体(不要忘记Less 应该在要查看的页面之前编译一段时间)浏览器)。
  • 换句话说,它是重复的,并不是因为 100% 相同的 Q,而是因为 100% 相同的 A。(尽管你如果改写你的 Q 以更明确地暴露你的目标,例如“我如何切换不同的 CSS样式之间?”应该没问题。除了已经有无数个这样的Q)。
  • 啊,谢谢七。不同的问题,但重复的答案是有道理的。我将结束这个问题。无论如何,我希望有一种方法可以使用更少的资源来做这样的事情,但看起来我将不得不研究一个不同的解决方案。

标签: css less


【解决方案1】:

为变量添加值,例如

@smallFont: 8pt;
@medFont: 16pt;
@largeFont: 24pt;

【讨论】:

  • 我认为你没有抓住重点。这些变量决定了偏移量的设置。
猜你喜欢
  • 2015-05-14
  • 1970-01-01
  • 1970-01-01
  • 2019-12-03
  • 2016-11-27
  • 2021-11-04
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多