目录
1、视口
2、rem体验
3、rem基本使用
4、媒体查询
5、rem适配
6、rem布局
7、less-体验
8、less-注释
9、less-运算
10、less-嵌套
11、less-变量
12、less-导入
13、less-导出
14、less-禁止导出
15、案例-极速问诊
1、视口
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!-- 视口标签：规定HTML的尺寸，让HTML的宽度 = 逻辑分辨率的宽度/设备的宽度 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>视口</title>
</head>
<body></body>
</html>2、rem体验
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>rem体验</title><style>div {width: 5rem;height: 3rem;background-color: pink;}</style>
</head>
<body><div></div><script src="./js/flexible.js"></script>
</body>
</html>3、rem基本使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>rem基本使用</title><style>* {margin: 0;padding: 0;}/* 1、给HTML标签加字号 */html {font-size: 30px;}/* 2、使用rem单位书写尺寸 */.box {width: 5rem;height: 3rem;background-color: pink;}/* 此时 1rem=30px */</style>
</head>
<body><div class="box"></div>
</body>
</html>4、媒体查询
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>媒体查询</title><style>/* 视口宽度是375，网页背景色是绿色 */@media (width:375px) {body {background-color: green;}}</style>
</head>
<body></body>
</html>5、rem适配
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>rem适配</title><style>* {margin: 0;padding: 0;}/* 1、使用媒体查询，给不同视口的屏幕设置不同的HTML字号 *//* @media (width:320px) {html {font-size: 32px;}}@media (width:375px) {html {font-size: 37.5px;}}@media (width:414px) {html {font-size: 41.4px;}} *//* 2、使用rem单位书写尺寸 */.box {width: 5rem;height: 3rem;background-color: pink;}</style>
</head>
<body><div class="box"></div><script src="./js/flexible.js"></script>
</body>
</html>6、rem布局
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>rem布局</title><style>/* 68px * 29px */div {width: 1.813rem;height: 0.773rem;background-color: pink;}</style>
</head>
<body><div></div><script src="./js/flexible.js"></script>
</body>
</html>7、less-体验
.father {color: red;width: (68 / 37.5rem);.son {height: (29 / 37.5rem);}
}.father {color: red;width: 1.81333333rem;
}
.father .son {height: 0.77333333rem;
}8、less-注释
9、less-运算
.box {width: 100 + 20px;width: 100 - 80px;width: 100 *2px;// 除法：(计算表达式) 或 ./ 推荐 ()width: (68 / 37.5rem);// width: 29 ./ 37.5rem;// 如果表达式有多个单位，最终css里面以第一个单位为准height: (29px / 37.5rem);
}.box {width: 120px;width: 20px;width: 200px;width: 1.81333333rem;height: 0.77333333px;
}
10、less-嵌套
.father {color: red;.son {width: 200px;a {color: green;// & 表示的是当前选择器，代码写到谁的大括号里就表示谁// 不会生成后代选择器// 应用：配合hover伪类或nth-child结构伪类使用&:hover {color: blue;}}// a:hover {// color: blue;// }}
}.father {color: red;
}
.father .son {width: 200px;
}
.father .son a {color: green;
}
.father .son a:hover {color: blue;
}
11、less-变量
// 1、定义变量
@myColor:green;// 2、使用变量
div {color: @myColor;
}p {background-color: @myColor;
}a {color: @myColor;
}
div {color: green;
}
p {background-color: green;
}
a {color: green;
}
12、less-导入
@import "./07_less_体验.less";
@import "./08_less_注释.less";.father {color: red;width: 1.81333333rem;
}
.father .son {height: 0.77333333rem;
}
/* 这是块注释允许换行
*/
13、less-导出
// out:./mycss/index.css// out:./css/// out:./index.css14、less-禁止导出
// out:false15、案例-极速问诊
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>极速问诊</title><link rel="stylesheet" href="./iconfont/iconfont.css"><link rel="stylesheet" href="./css/index.css">
</head>
<body><!-- 头部 --><header><a href="#" class="back"><span class="iconfont icon-left"></span></a><h3>极速问诊</h3><a href="#" class="note">问诊记录</a></header><!-- banner --><div class="banner"><img src="./assets/entry.png" alt=""><p><span>20s</span> 快速匹配专业医生</p></div><!-- 问诊类型 --><div class="type"><ul><li><a href="#"><div class="pic"><img src="./assets/type01.png" alt=""></div><div class="txt"><h4>三甲图文问诊</h4><p>三甲主治及以上级别医生</p></div><span class="iconfont icon-right"></span></a></li><li><a href="#"><div class="pic"><img src="./assets/type02.png" alt=""></div><div class="txt"><h4>普通图文问诊</h4><p>二甲主治及以上级别医生</p></div><span class="iconfont icon-right"></span></a></li></ul></div><script src="./js/flexible.js"></script>
</body>
</html>// out: ../css/@import "./base.less";// 定义变量
@rootSize: 37.5rem;// 头部
header {display: flex;justify-content: space-between;padding: 0 (15 / @rootSize);height: (44 / @rootSize);// background-color: pink;line-height: (44 / @rootSize);.icon-left {font-size: (22 / @rootSize);}h3 {font-size: (17 / @rootSize);}.note {font-size: (15 / @rootSize);color: #2CB5A5;}
}// banner
.banner {margin-top: (30 / @rootSize);margin-bottom: (34 / @rootSize);text-align: center;img {margin-bottom: (18 / @rootSize);width: (240 / @rootSize);height: (206 / @rootSize);}p {font-size: (16 / @rootSize);span {color: #16C2A3;}}
}// 问诊类型
.type {padding: 0 (15 / @rootSize);li {margin-bottom: (15 / @rootSize);padding: 0 (15 / @rootSize);height: (78 / @rootSize);border: 1px solid #EDEDED;border-radius: (4 / @rootSize);a {display: flex;align-items: center;// 内容在78里面垂直居中height: (78 / @rootSize);img {margin-right: (14 / @rootSize);width: (40 / @rootSize);height: (40 / @rootSize);}.txt {flex: 1;h4 {font-size: (16 / @rootSize);color: #3C3E42;line-height: (24 / @rootSize);}p {font-size: (13 / @rootSize);color: #848484;line-height: (20 / @rootSize);}}.iconfont {font-size: (16 / @rootSize);}}}
}
![[创业之路-527]：什么是产品技术成熟度曲线？](http://pic.xiahunao.cn/[创业之路-527]：什么是产品技术成熟度曲线？)
