一、rem 1、体验媒体查询
@media (width: 375.2px) {
/* 设置html标签的字体大小 */
html {
font-size: 37.5px;
}
}
/* 2.适配414宽度 的手机 */
@media (width: 414.4px) {
html {
font-size: 41.4px;
}
}
/* 1rem=1html字号大小 */
.box {
width: 5.33rem;
height: 5.33rem;
background-color: purple;
}
2、rem适配
<style>
* {
margin: 0;
padding: 0;
}
/* html字体大小设置为屏幕视口的 1/10 320px 375px 414px*/
/* @media (width: 320px) {
html {
font-size: 32px;
}
}
@media (width: 375.2px) {
html {
font-size: 37.5px;
}
}
@media (width: 414.4px) {
html {
font-size: 41.4px;
}
} */
/*
适配移动端过程：
1.要利用媒体查询规定不同的屏幕宽度设置不同的根字号大小；屏幕宽度的1/10
2.页面元素就可以使用rem相对单位，1rem=1html文字大小
*/
.box {
width: 5rem;
height: 4rem;
font-size: 0.8rem;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box"></div>
<script src="./js/flexible.js"></script>
</body>
</html>
3、利用rem+flexible.js画盒子
.box {
width: 70.0003px;
height: 50.0018px;
font-size: 19.9985px;
background-color: skyblue;
}
.title {
font-size: 14.0008px;
line-height: 41.9987px;
width: 199.9998px;
height: 99.9999px;
}
</style>
</head>
<body>
<div class="box">帅</div>
<!-- 1.插入js文件 标签 script 已经根据不同的视口宽度设置了不同的html根字号的大小 -->
<script src="./js/flexible.js"></script>
</body>
</html>
4、pc端媒体查询
pc端的媒体一般条件为范围
max-width 规定最大宽度
min-width 规定最小宽度
*/
@media (max-width: 1366px) {
.box {
width: 400px;
height: 400px;
background-color: skyblue;
}
}
@media (min-width: 1366px) and (max-width: 1580px) {
.box {
width: 500px;
height: 300px;
background-color: orange;
}
}
@media (min-width: 1580px) {
.box {
width: 600px;
height: 400px;
background-color: purple;
}
}
二、less
1.less有重大语法错误不会转css文件
2、less注释： // 单行注释 ctrl+/ ，单行注释不会编译在css文件中
/* shift+alt+a 我是多行注释 */
/** 你们不要再打啦 **/
3、计算
less计算：
+ - * 除法./或者()
注意点：
1.单位在表达式之中不分顺序，表达式中如果有多个单位以第一个单位为准；
2.写法规范：运算符前后要么都用空格隔开，要么前后都不要空格
*/
.box {
width: 100 + 200px;
height: 500px - 300;
font-size: 10 * 10px;
// line-height: 200px ./ 10;
width: (500 / 100px);
height: 300px + 200deg + 10rem;
line-height: 100px+10px;
width: 200 +10px;
}
4、嵌套
// 1.生成后代选择器
.box {
background-color: red;
.title {
width: 200px;
}
.footer {
height: 200px;
}
}
// 2.生成子代选择器 >
.father {
> .son {
color: #333;
> .sun {
font-size: 20px;
}
}
}
// 3.交集选择器 &符号指代的是直接上级
p.red {
background-color: red;
}
p {
&.red {
background-color: skyblue;
}
}
// 4.并集选择器
.box1,
.box2 {
color: #333;
}
.box {
.son1,
.son2 {
color: #000;
}
}
// 5.伪类选择器 :hover
.box li:hover a {
color: #666;
}
.box {
li:hover {
a {
color: #333;
}
}
}
// &符号不生成后代选择器，表示直接上级
.box {
li {
span {
&:hover {
a {
color: #999;
}
}
}
}
}
// 6.添加伪元素
.box {
a::before {
content: '';
}
a {
&::after {
content: '';
}
}
}
// 7.结构伪类选择器 直接写在选择器的后面是没有提示的
.header {
li:last-child {
margin-right: 0;
}
li {
&:first-child {
margin-left: 0;
}
}
}
5、变量
// 变量 @变量名: 值;
/* 大大节约维护代码成本 */
@themeColor: gold;
@fontSize: 18px;
body {
background-color: @themeColor;
}
.box1 {
background-color: @themeColor;
font-size: @fontSize;
.son {
background-color: @themeColor;
}
}
.footer {
background-color: @themeColor;
font-size: @fontSize;
}
6、导入
// @import "你要导入的文件路径";
@import url(./03-计算.less);
@import './04-嵌套.less';
7、导出
/*
注意点：
1.css导出路径，后面一定要写/，如果不写只是普通的文件名，不要分号结尾；
2.less配置信息，一般要写在第一行
*/
8、禁止导出
//out: false
9、压缩导出
// compress:true,out:./
.box {
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
background-color: #fff;
border-radius: 50%;
}
