目錄
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]：什么是產品技術成熟度曲線？)
