web-rem布局-less运算练习

最新推荐文章于 2024-07-24 23:00:08 发布

Dowen00

最新推荐文章于 2024-07-24 23:00:08 发布

阅读量32

点赞数

文章标签：前端 less 数学建模

本文链接：https://blog.csdn.net/m0_63171030/article/details/131414394

版权

less运算.html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>less运算案例</title>
    <link rel="stylesheet" href="count.css">
</head>

<body>
    <div>
    </div>
</body>

</html>

count.less:

@basefont:50px;
html {
    font-size: @basefont;
}
@border:5px * .5;
div {
    width: 200px + 300PX * 10px;
    height: 200px;
    border: @border solid red;
    // 颜色也可以参与运算
    background-color: #666 + #222;
}  
img {
// 进入4.0版本后， 除法运算符如果在括号外面，不执行除法运算， 如果在小括号内可以看做是除法运算， 或者 使用 ./ 强制做除法运算
// 所以解决办法就是：
// 除法运算加（）
// 将/写成./
    width: (82rem / @basefont); 
    height: 82rem ./ @basefont;
}
// 1.我们运算符的左侧必须敲一个运算符隔开
// 2.两个数参与运算，如果只有一个数有单位，则最后的结果就以这个单位为准
// 3.两个数参与运算，如果两个数都有单位，而且不一样的单位，最后结果以第一个单位为准

count.less文件保存后自动生成的count.css文件：

html {
  font-size: 50px;
}
div {
  width: 3200px;
  height: 200px;
  border: 2.5px solid red;
  background-color: #888888;
}
img {
  width: 1.64rem;
  height: 1.64rem;
}