LESS中的单位问题解决方案
LESS是一种动态样式语言，是CSS预处理器的一种。与原生CSS相比，LESS提供了更丰富的函数，更灵活的语法以及更强大的扩展性，为前端开发带来了很大的便利。但是，随着现代web开发中复杂度的增加，开发者们注意到LESS编写中单位的使用问题，导致很多代码难以重用和维护。本文将对LESS中的单位问题进行详细的阐述，同时提供解决方案和指导意义。
问题描述
LESS中的单位问题主要体现在以下两个方面。
第一，浏览器对不同单位的支持不同。例如，IE8仅支持px、em和%三种单位，而不支持rem、vw、vh等单位。因此，在编写LESS代码时，需要考虑到不同浏览器对单位的支持情况，否则可能导致布局错乱或者其他问题。
第二，Web设计师和开发者在使用css时很容易出现“魔法数字”或“幻数”。
例如，下面的代码在生成时由px转化为em
@media screen and (max-width: 600px) {
.box {
font-size: 1.2em;
padding: 20px;
line-height: 1.5em;
}
}由于传统CSS单位不是响应式的，所以需要将值在动态情况下进行更改。上面的代码将字体大小、边距和行高转换为em单位；将来自屏幕的最大宽度计算为1.2倍的字体大小，将间距设置为20px，并将行高设置为字体大小的1.5倍。
但是这段代码也存在单位问题，如果这段代码中的1.2em,20px,1.5em，这些值就需要手动关注每个样式，手动计算其转化值，如果程序员的单位转换计算有误还会导致页面布局的错乱。
解决方案
为了解决上述问题，我们需要采用一些技术手段，让LESS代码更加适应不同的设备和浏览器。
第一，使用响应式单位
相比较传统的单位，推出了一种响应式的单位，rem以及vw、vh，CSS3引入了vw和vh作为Viewport中百分比的替代品，rem是root em的略称，也就是根元素的字体大小的值。
根据W3C的定义，1rem = html元素的字体大小。因此，可以通过Math进行计算，用html元素的字体大小（即1rem）来计算实际的尺寸。这种单位特别适合用于响应式设计，因为页面中的所有元素都严格按照em或rem的值进行增大或缩小，而像像px这样的固定单位不会随屏幕大小而自适应。
例如
/* 距离屏幕顶部50%，左边20% */
.box {
position: absolute;
top: 50%;
left: 20vw;
padding: 10vw 4rem;
font-size: 0.8rem;
}上面的CSS代码用vw、rem的方式进行计算，达到响应式的效果。这样，不管屏幕大小如何变化，元素的大小和位置都会按照vw、rem的规则进行比例缩放，形成一种流式的布局。
第二，使用CSS计算
CSS也提供了一些计算的方法，例如calc，可以用来做更复杂的运算。calc函数可以接受一个或多个长度值或百分比，它包含基本运算符：+， -， *和 /。它支持在长度，频率，时间和百分比中进行运算。
例如：
-- -------------------- ---- ------- -- --------- -- ---- - ------ -------- - ------ ------- -------- - ------ -------------- ---- ----------- -------- --------- --------- ---- -------- - ----- ----- -------- - ----- ----------- ------- ---------- --------- - ------- -------- --------- - ------ --------- - ------- -
在上面的代码中，box元素的宽度和高度均为整个页面宽度的一半减去20像素。在计算水平和垂直位置时，使用calc来计算相对值。
总结
通过使用响应式布局和CSS计算函数，在LESS代码中使用单位问题得到了很好的解决。但是，要想彻底解决这些问题还需开发者们更加深入地研究浏览器兼容性问题和计算函数的具体使用，结合实际项目提出适合于自己和同事的最佳实践。
参考文献
https://www.zhangxinxu.com/wordpress/2012/08/less-rem-calculator/ https://www.w3schools.com/cssref/css_units.asp https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646ca796968c7c53b0b999a8