LESS 是一种 CSS 预处理器，它提供了许多有用的功能，其中最常用的是变量、嵌套、Mixin 和函数等。在 LESS 中，我们可以使用 calc() 函数来进行简单的算术运算，以便更好地控制样式。而 Media Query 则是一种响应式设计的核心技术，它可以根据设备的屏幕大小和方向来调整页面的样式。本文将介绍如何在 LESS 中使用 calc() 函数和 Media Query 协同工作，以实现更好的响应式设计。
LESS 中的 calc() 函数
calc() 函数是 CSS3 中引入的一种新的计算方法，它可以在 CSS 中进行简单的算术运算，如加、减、乘、除等。在 LESS 中，我们可以使用 calc() 函数来计算长度、百分比、角度和时间等值。例如：
div {
width: calc(100% - 20px);
height: calc(50vh + 10px);
font-size: calc(16px * 1.5);
line-height: calc(1.2em + 2px);
}在上面的代码中，我们使用 calc() 函数来计算 div 元素的宽度、高度、字体大小和行高等样式。这些计算结果可以根据不同的设备来进行调整，以实现更好的响应式设计。
Media Query 中的 calc() 函数
Media Query 是一种 CSS 技术，它可以根据设备的屏幕大小和方向来调整页面的样式。在 LESS 中，我们可以使用 Media Query 来实现响应式设计。例如：
@media (min-width: 768px) {
div {
width: calc(50% - 20px);
height: calc(100vh - 50px);
font-size: calc(16px * 1.2);
line-height: calc(1.2em + 1px);
}
}在上面的代码中，我们使用了 Media Query 和 calc() 函数来调整 div 元素在屏幕宽度大于 768px 时的样式。这些样式可以根据不同的屏幕大小和方向来进行调整，以实现更好的响应式设计。
协同使用示例
下面是一个示例代码，演示了如何在 LESS 中使用 calc() 函数和 Media Query 协同工作，以实现更好的响应式设计。
// javascriptcn.com 代码示例
@tablet: 768px;
@desktop: 1024px;
div {
width: 100%;
height: 50vh;
font-size: 16px;
line-height: 1.2em;
@media (min-width: @tablet) {
width: calc(50% - 20px);
height: calc(100vh - 50px);
font-size: calc(16px * 1.2);
line-height: calc(1.2em + 1px);
}
@media (min-width: @desktop) {
width: calc(33.33% - 30px);
height: calc(50vh - 20px);
font-size: calc(16px * 1.5);
line-height: calc(1.2em + 2px);
}
}在上面的代码中，我们定义了两个变量 @tablet 和 @desktop，用于指定不同的屏幕大小。然后，我们定义了一个 div 元素，并设置了它的宽度、高度、字体大小和行高等样式。接着，我们使用了 Media Query 和 calc() 函数来调整 div 元素在不同屏幕大小下的样式。例如，在屏幕宽度大于 768px 时，我们将 div 元素的宽度设置为 50%，高度设置为屏幕高度减去 50px，字体大小和行高也进行了调整。
总结
LESS 中的 calc() 函数和 Media Query 是实现响应式设计的重要技术。使用它们可以更好地控制样式，使页面在不同的设备上呈现出更好的效果。在使用时，我们需要注意不同的屏幕大小和方向，并根据实际情况进行调整。希望本文能够对你有所启发，让你更好地掌握 LESS 中 calc() 函数和 Media Query 协同使用的技巧。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6586b863d2f5e1655d118950