.less文件中错误写法和对应生成的.css文件:
@media screen and (min-width:540px) {
html{
font-size: 54px;
}
}
div{
width: 350/54rem;
height: 350/54rem;
background-color: #000;
}
@media screen and (min-width: 540px) {
html {
font-size: 54px;
}
}
div {
width: 350/54rem;
height: 350/54rem;
background-color: #000;
}
上面可以看到,less计算中除法并没有生效(300/54),这是学rem和less时遇到的问题。百度一下发现less插件中为了保证严谨性,除法需要添加括号的。
@media screen and (min-width:540px) {
html{
font-size: 54px;
}
}
div{
width: (350/54rem);/* 加括号 */
height: (350/54rem);
background-color: #000;
}
生成的CSS文件就换替换上小数
@media screen and (min-width: 540px) {
html {
font-size: 54px;
}
}
div {
width: 6.48148148rem;
/* 加括号 */
height: 6.48148148rem;
background-color: #000;
}