我的 LESS 数学运算在我的媒体查询定义中不起作用

2023-12-14

我试图使布局的断点变量较小,这样我就可以轻松地检查多个想法,但是:

@breakpoint: 500px;

@media all and (min-width: @breakpoint){
  #someid{
    height: 4321px;
  }
}
@media all and (min-width: @breakpoint + 1){
  #someid{
    height: 1234px;
  }
}
#someid{
  height: @breakpoint + 1;
}

编译为:

@media all and (min-width: 500px) {
  #someid {
    height: 4321px;
  }
}
@media all and (min-width: 500px + 1) { /*THE PROBLEM*/
  #someid {
    height: 1234px;
  }
}
#someid {
  height: 501px;
}

对变量的计算不会在媒体查询中发生,或者至少不会以我期望的方式发生。这种行为有解决方法吗?这也是一个错误吗?我应该将其归档吗?


就像 CSS 逻辑一样calc()方法,媒体查询中的方程(已经由一组括号封装)需要由一组额外的括号封装。这是行不通的:

(min-width: 500px + 1) {CSS goes here}

但这会:

(min-width: (500px + 1px)) {CSS goes here}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

我的 LESS 数学运算在我的媒体查询定义中不起作用 的相关文章

  • 为什么inline-block元素出现在inline元素的下方?如何让它们出现在同一行?

    我目前正在尝试理解基本的 HTML 和 CSS 概念 并遇到了一个非常奇怪的问题 我有两个元素 一个具有 display inline 另一个具有 display inline block 我正在尝试创建一个列表 类似的东西1 SOME C
  • 是否可以将CSS应用于半个字符?

    我在寻找什么 一种打造风格的方法HALF一个角色的 在这种情况下 一半的字母是透明的 我目前搜索和尝试过的内容 没有运气 设置半个字符 字母样式的方法 使用 CSS 或 JavaScript 设置字符的一部分样式 将 CSS 应用于字符的
  • 有 CSS 的替代品吗?

    是否有替代 CSS 的样式表格式化语言 或者 CSS 是当前用于执行样式表格式化类型操作的单一语言 我查看了维基百科上 CSS 的描述 http en wikipedia org wiki Cascading Style Sheets ht
  • 如何隐藏其他选项卡的内容并仅显示所选选项卡的内容

    当我单击特定选项卡时 其他选项卡的内容应该隐藏 但它并没有隐藏 这是我所有的代码 function showStuff id if document getElementById id style display block documen
  • 当鼠标悬停在链接上时,如何在链接旁边创建弹出框?

    这是我想要实现的 我的网页上显示了两个超链接 a href http foo com foo a a href http bar com bar a 我还有两个对 div 链接的描述 div foo means foo div div ba
  • javascript中怪异模式的元素宽度?

    我一直在浏览所有流行的 js 库 但我找不到一个具有 DOM 元素宽度函数的库 该函数实际上可以解释 Internet Explorer 中的怪异模式 问题是 当启用怪异模式时 填充和边框不会计入宽度 据我所知 当省略 doctype 或将
  • 如何观察包含许多 sass 文件的整个目录/文件夹的变化

    我如何跟踪包含许多 sass 文件的整个目录的更改 我正在使用以下命令来观察 sass 的变化 file sass watch style scss style css 但是如何观察包含许多 sass 文件的整个目录 文件夹的变化 只需使用
  • 使用 bootstrap 将搜索图标放入文本框中

    我默认使用引导程序 文本框占据列的全宽 我想将搜索图标放在文本框的末尾 我的代码是这样的 div class container div class row div class form group col lg 4 div div div
  • 导航栏折叠在 Bootstrap 中不起作用

    Bhanu pratap 解决了这个问题 在这个问题的末尾检查一下 我一直在遵循旧的路线来构建导航栏折叠 三明治 问题是课程中的页面顶部似乎有一个黑条 并且缩小页面时会出现导航栏 对我来说 我只需在左侧找到一个按钮 另外 当我缩小页面时 我
  • CSS - SASS:使用基于@each的mixins来生成多个背景

    我正在使用 CSS 创建发型和颜色目录 我有 55 种不同颜色和发型的组合 每种发型和颜色都有自己的图像 SVG 文件 我需要将它们全部组合成一个背景 使用 CSS3 的多背景功能 我编写了这个混合来生成多个背景 它基于 mixin在这篇文
  • 如何使用CSS将背景图像放入选择选项标签中

    我有一个从 json 响应接收的国家 地区下拉列表 并且想要在国家 地区名称旁边添加相应的国家 地区国旗图标 也从 json 响应获取图像 我已经尝试了不同的 jQuery 和 bootstrap 插件 但他们所做的是破坏我以前的选择框样式
  • 监听浏览器宽度以进行响应式网页设计?

    我正在努力使我的网站适合移动设备 我想知道浏览器窗口的大小 以便当它比 728px 窄时我可以执行某些操作 而当它大于 728px 时我可以执行其他操作 这必须考虑到调整 PC 上的窗口大小以及在手机中从纵向模式更改为横向模式 如何才能做到
  • 无法正确显示行

    我应该在这个问题的开头说我完全没有 html css javascript 背景 所以请对我宽容点 如果我使用了错误的术语或者问了一个愚蠢的问题 没有提供足够的信息 请抱歉 我正在尝试让一个可扩展的表工作 通过阅读论坛线程 教程 将 nex
  • 每 2 行后使 html 表格的边框变厚

    我创建了一个包含一些内容的表 其中有 12 行和 2 列 我想显示边框 但每 4 行之后 我想将水平边框设置为比正常情况更粗 怎么做 请在这里帮忙 试试这个选择器 table tr nth of type 4n td border bott
  • 浮动图像周围具有最小列宽的流动文本

    我想要一种方法来防止流动文本列变得太窄 例如 在一列 HTML 文本中 有一个图像浮动到左侧 正如预期的那样 文本沿着图像周围的列的右侧向下流动 但是 如果图像几乎与列一样宽 则文本最终会非常窄 在这种情况下 我希望文本简单地not流过图像
  • 两列表:一列尽可能小,另一列占据其余部分

    我在 div 中有一个 to columns 表 div table tbody tr td class action a a td td class content p Bigger text variable size p td tr
  • 导航栏下拉菜单(折叠)在 Bootstrap 5 中不起作用

    我在尝试使用以下命令创建响应式菜单或下拉按钮时遇到问题Bootstrap 5一切似乎都正常 导航图标和下拉图标出现 但它不起作用 当我单击nav图标或dropdown按钮 无dropdown menu apears 我想特别提到的是 我还包
  • 删除 IE9 边缘周围的 2px 灰色边框

    我正在尝试对这个网站进行编码 尝试关键字 并且我正在尝试找出如何删除这个阴影2px灰色边框延伸到 IE9 窗口的内部 至少顶部 左侧和底部 我的边距设置为零 因此所有页面元素都到达页面的最边缘 但使用 IE9 它们会停在这个灰色边框处 我没
  • 主页(网格)上的缩略图现在显得模糊。如何纠正?

    我不知道这看起来是否愚蠢 但从早上开始我就无法纠正这个突然出现在我的博客网站上的错误www candidopinions in http www candidopinions in 我有一个网格视图模板 其中博客文章中的特色图像作为调整大小
  • css3按钮背景颜色无限过渡

    有没有办法仅使用 css3 使按钮的背景颜色从灰色渐变为蓝色 然后又回到灰色 一个很好的例子是默认操作按钮是可可 我知道这可以在 javascript 中完成 但我宁愿只使用 css 来完成此操作 您好 我已经通过 CSS3 动画制作了按钮

随机推荐